Skill Gallery
← Back to list
CheekyCodexConjurer

create-ui-component

by CheekyCodexConjurer

AERA: local-first workstation for quantitative research, visualization, and backtesting.

⭐ 0🍴 0📅 Jan 6, 2026
algorithmic-tradingalgorithmic-trading-enginequant-researchquantitative-finance
View on GitHubRun in Manus

SKILL.md

name: Create UI Component description: Use this skill when creating a new React UI component. It provides a consistent Lumina-style template.

Create UI Component

Use this skill to create new React components that match the current Lumina look (clean, light, slate/sky tones).

When to use

  • The user asks to create a new component/view/modal/panel.
  • You are introducing a new interaction surface in the UI.

Guidelines

  1. Styling: use Tailwind classes matching the current Lumina look (light backgrounds, slate text, subtle borders/shadows).
  2. No new stylesheets: avoid adding .css / CSS modules unless unavoidable.
  3. Prefer existing primitives: check src/lumina/components/common/ before introducing new UI patterns.
  4. Icons: use lucide-react.
  5. Extensibility: accept className + standard HTML props where reasonable.

Steps

  1. Start from template.tsx in this folder.
  2. Place the component under the appropriate folder (src/components/..., src/lumina/..., or feature folder).
  3. Keep responsibilities separated (UI vs logic hook vs service calls).
  4. Validate interaction states if it’s interactive (hover/focus/disabled/loading/error).

Score

Total Score

55/100

Based on repository quality metrics

✓SKILL.md

SKILL.mdファイルが含まれている

+20
○LICENSE

ライセンスが設定されている

0/10
○説明文

100文字以上の説明がある

0/10
○人気

GitHub Stars 100以上

0/15
✓最近の活動

3ヶ月以内に更新

+5
○フォーク

10回以上フォークされている

0/5
✓Issue管理

オープンIssueが50未満

+5
✓言語

プログラミング言語が設定されている

+5
✓タグ

1つ以上のタグが設定されている

+5

Reviews

💬

Reviews coming soon