원클릭으로 Manus에서 모든 스킬 실행

fe-component-craft

스타10

포크1

업데이트2026년 6월 24일 08:19

Build UI components that are accessible, responsive, and complete — not just the happy path. Triggers when building a button, form, input, modal, dropdown/menu, table, card, nav, toast, tabs, tooltip, or any reusable component — or when UI "works but feels off", "isn't accessible", or "breaks on mobile". Covers a11y (semantics, ARIA, keyboard, focus), every interaction state, responsive behavior, and the polish that separates designed from default.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

aturzone

aturzone/MasterClaude

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Frontend component craft — accessible, responsive, complete

A component isn't done when it renders — it's done when it works for everyone, on every screen, in every state.

Accessibility (non-negotiable)

Semantic HTML first — button / a / nav / label / table; reach for ARIA only when no native element fits (the first rule of ARIA is don't use ARIA).
Keyboard — everything operable without a mouse; a visible focus ring (never outline:none without a replacement); logical tab order; Esc closes overlays; arrow keys move within menus/listboxes.
Focus management — trap focus inside an open modal, restore it to the trigger on close; move focus to new content (e.g. a revealed panel).
Names & labels — every input has a <label>; icon-only buttons get aria-label; images get alt.
Contrast — text ≥ 4.5:1, large text / UI elements ≥ 3:1 (WCAG AA).
Don't hand-roll overlays, menus, comboboxes, dialogs — use Radix / headless primitives; they get the focus and keyboard model right.

Every state, not just the default

default · hover · active · focus-visible · disabled · loading · empty · error · selected. A button that only styles its default state is half-built. Show loading on async actions and disable to prevent double-submit.

Responsive

Mobile-first. Fluid type/space with clamp(). Lay out with flex/grid + gap; container queries for components that live in varying widths. Tap targets ≥ 44px. Tables become cards on narrow screens. Test 360px → 1440px; never produce a horizontal scrollbar.

Polish (the last 10% that reads as "designed")

Consistent spacing from the scale · alignment to a grid · transitions on transform/opacity (120–200ms) · skeleton/optimistic loading · empty states that suggest the next action · honor prefers-reduced-motion.

Verify with fe-design-review. Uses the tokens from fe-design-system. Credits: Radix / shadcn-ui, the WAI-ARIA Authoring Practices (APG). See docs/ECOSYSTEM.md.

이 저장소의 다른 Skills

같은 저장소

guardian

aturzone/MasterClaude

Scope & verification discipline for a working session. Triggers when about to claim "done / fixed / passing", when a test is about to be weakened, skipped, commented out or deleted to get a suite green, when a refactor, abstraction or dependency appears that the task never asked for, and on "audit this diff" / "did we actually verify that?". Guidance the model follows — it is not enforcement; nothing here can block a tool call.

2026-07-1610

master-claude

aturzone/MasterClaude

The MASTER CLAUDE leader/conductor. Triggers on "master claude", "set up master claude", "mc setup", "onboard me", "build my team", "what's new", or when starting work in a new/unfamiliar project. It interviews you (grill-me), maps the project, then assembles a tailored team from the installed skills and agents — Sentinel the project cartographer plus planning, review, understanding, guardrail and security specialists — and runs it on your work. It builds the best `.claude/` workspace per project, delegates to parallel subagents (choosing the right model per agent), brainstorms hard and decides fast, keeps a complete view of every installed capability, keeps itself and you current with the newest Claude Code features, and proactively offers the right tool the moment a need shows up.

2026-07-1610

compactor

aturzone/MasterClaude

Continuity across long sessions. Snapshots in-progress work before context compaction and restores it after, and nudges auto-compaction toward a natural breakpoint so nothing important is lost mid-task.

2026-07-1610

claude-current

aturzone/MasterClaude

Stay current with Claude Code and Claude itself. Triggers on "what's new", "what can Claude Code do now", "is there a newer/better way", "update master claude", "which model should I use", or before relying on any claim about a Claude Code feature, model, price, or limit. Checks the installed version, the live changelog, and the harness surface MASTER CLAUDE depends on — then reports only the deltas that matter for this project.

2026-07-1610

model-router

aturzone/MasterClaude

How MASTER CLAUDE picks the right model for each agent and task. Triggers on "which model", "pick a model", "model selection", "use haiku/sonnet/opus", "cheaper model", "model per agent", or whenever spawning a subagent/team and choosing its model, or optimizing cost vs. quality on a long run. Gives a role→model heuristic, the "turn count beats token price" rule, the effort dial, and the cost math so the team is both strong where it matters and cheap where it doesn't.

2026-07-1610

subagent-orchestration

aturzone/MasterClaude

How MASTER CLAUDE delegates work to subagents and teams. Triggers on "delegate", "spawn agents", "parallel agents", "fan out", "run these in parallel", "subagent", "orchestrate", "build a team for this", or whenever a task splits into independent chunks, needs a fresh-eyes review, or means reading many files. Teaches the orchestrator-worker pattern: pick the right primitive (subagent vs agent-team vs background session), write a complete delegation brief, parallelize only when it pays, scale effort to the task, and verify with an adversarial reviewer. Use to plan and run any multi-agent push.

2026-07-1610

name	fe-component-craft
description	Build UI components that are accessible, responsive, and complete — not just the happy path. Triggers when building a button, form, input, modal, dropdown/menu, table, card, nav, toast, tabs, tooltip, or any reusable component — or when UI "works but feels off", "isn't accessible", or "breaks on mobile". Covers a11y (semantics, ARIA, keyboard, focus), every interaction state, responsive behavior, and the polish that separates designed from default.
allowed-tools	Read, Grep, Glob, Write, Edit

Frontend component craft — accessible, responsive, complete

A component isn't done when it renders — it's done when it works for everyone, on every screen, in every state.

Accessibility (non-negotiable)

Semantic HTML first — button / a / nav / label / table; reach for ARIA only when no native element fits (the first rule of ARIA is don't use ARIA).
Keyboard — everything operable without a mouse; a visible focus ring (never outline:none without a replacement); logical tab order; Esc closes overlays; arrow keys move within menus/listboxes.
Focus management — trap focus inside an open modal, restore it to the trigger on close; move focus to new content (e.g. a revealed panel).
Names & labels — every input has a <label>; icon-only buttons get aria-label; images get alt.
Contrast — text ≥ 4.5:1, large text / UI elements ≥ 3:1 (WCAG AA).
Don't hand-roll overlays, menus, comboboxes, dialogs — use Radix / headless primitives; they get the focus and keyboard model right.

Every state, not just the default

Responsive

Polish (the last 10% that reads as "designed")

Verify with fe-design-review. Uses the tokens from fe-design-system. Credits: Radix / shadcn-ui, the WAI-ARIA Authoring Practices (APG). See docs/ECOSYSTEM.md.