Run any Skill in Manus with one click

fe-component-craft

Stars10

Forks1

UpdatedJune 24, 2026 at 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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

aturzone

aturzone/MasterClaude

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

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

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.

More from this repository

same repository

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.