Skip to content
mcp/skillhub

Agent Skill

Form Component skill

form-componentjeremylongshore/tons-of-skills-marketplaceplugins/ai-agency/tonone/skills/form-component/SKILL.md

Use when asked to design a UI component, specify a button, input, card, modal, badge, or any interactive element. Examples: "design a button component", "spec out the input field", "define the card component states", "create a component spec for Prism", "what should the dropdown look like".

2.9kMIT

always on

67 tokname + description

once used

3,645 tokSKILL.md body

bundled files

11 KB

repo stars

2.9kGitHub

Install the Form Component skill

Skills CLI (Claude Code, Codex, Cursor and others)

npx skills add https://github.com/jeremylongshore/tons-of-skills-marketplace --skill form-component

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/jeremylongshore/tons-of-skills-marketplace.git /tmp/tons-of-skills-marketplace
mkdir -p ~/.claude/skills
cp -R /tmp/tons-of-skills-marketplace/plugins/ai-agency/tonone/skills/form-component ~/.claude/skills/form-component

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description67 tok
When the agent uses itThe SKILL.md instructions3,645 tok
Only if opened1 bundled files (1 KB)varies

Until it is used, form-component costs about 20× less than the median MCP server we measured (1,363 tokens on every turn). Installing all 150 skills from jeremylongshore/tons-of-skills-marketplace would load 9,741 tokens of descriptions. Skills vs MCP study

Checks

Our checks found nothing to flag: it follows the Agent Skills specification's naming and size guidelines and doesn't pipe downloads into a shell.

Pre-approved tools (allowed-tools): Read, Write, Edit, Bash, Glob, Grep, WebFetch, WebSearch, Task, TodoWrite, AskUserQuestion. The agent can use these without asking while the skill is active.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Form Component
  • Phase 1: Discovery
  • Component Identity
  • Context
  • Platform
  • Existing Token Layer
  • Phase 2: Verify Token Layer
  • Check
  • If tokens exist
  • If tokens do not exist
  • Phase 3: State Matrix
  • Interactive States
  • Data States
  • Responsive States
  • Variants
  • Phase 4: Component Spec
  • Spec format
  • Dimensions table
  • Token gap protocol
  • Phase 5: Deliverable
  • Component spec table
  • Accessibility specification
  • Anti-Patterns
  • Delivery

More skills from jeremylongshore/tons-of-skills-marketplace

All skills in this repo
  1. agency-osjeremylongshore/tons-of-skills-marketplace

    Notion-as-source-of-truth dispatch board for running your work like an AI agency. One Tasks database is the source of truth; tasks flow Suggestion through Discussion, To-Do, In Progress, and Done with subtasks, recurring cadences, dependencies, and template subtrees. Batch execution fans approved To-Do rows out to parallel agents with per-task model selection. Use when capturing chat to Notion, running the To-Do queue, suggesting, approving, or discussing tasks, or coordinating multi-task batches. Trigger with "/agency-os" subcommands or natural-language variants ("add a suggestion: …", "let's discuss X", "run the queue").

    2.9k1142 tok idle · 1,602 in use
  2. apexjeremylongshore/tons-of-skills-marketplace

    Engineering lead — hand Apex any task and it routes internally. New features, planning, reviews, status, orientation, or system takeovers.

    2.9k31 tok idle · 210 in use
  3. apex-planjeremylongshore/tons-of-skills-marketplace

    Plan and scope a project — discovery, challenge assumptions, present S/M/L options with token and cost estimates. Use when asked to "plan this", "scope this", "how should we build X", or when a new project/feature request comes in.

    2.9k56 tok idle · 663 in use
  4. apex-reconjeremylongshore/tons-of-skills-marketplace

    Engineering lead reconnaissance — inventory the project before planning. Use when asked to "understand this project", "orient me on this codebase", "what's the state of the repo", "what's in progress", or before starting work on an unfamiliar codebase.

    2.9k58 tok idle · 675 in use
  5. apex-reviewjeremylongshore/tons-of-skills-marketplace

    Cross-cutting review of recent work — catches gaps between specialists. Use when asked to "review what we built", "check the work", "pre-launch review", or after completing a significant chunk of work.

    2.9k46 tok idle · 630 in use
  6. apex-statusjeremylongshore/tons-of-skills-marketplace

    CTO-level project status from git and codebase state. Use when asked "where are we", "project status", "what's done", or at the start of a work session.

    2.9k41 tok idle · 258 in use
  7. apex-takeoverjeremylongshore/tons-of-skills-marketplace

    System takeover — take ownership of an existing codebase or inherited system. Use when "we acquired this", "previous team left", "take over this system", "inherited this codebase".

    2.9k45 tok idle · 727 in use
  8. atlasjeremylongshore/tons-of-skills-marketplace

    Knowledge engineer — architecture docs, ADRs, diagrams, changelogs, onboarding, and reports.

    2.9k22 tok idle · 219 in use