All Skills Search Tools

|

Loading...

AI Agent Skills Directory with categorization, English/Chinese translation, and script security checks.

Sitemap

Home
All Skills
Search
Tools

About

About Us
Disclaimer
Copyright

Help

FAQ
Privacy
Terms

Contact Us:osulivan147@qq.com

© 2026 Skill4Agent. All rights reserved.

Home/All Skills/Frontend Development/component-spec

component-spec

Original：🇺🇸 English

Translated

Write a detailed component specification including props, states, variants, accessibility requirements, and usage guidelines.

3installs

Sourceowl-listener/designer-skills

Added on2026-03-13

NPX Install

npx skill4agent add owl-listener/designer-skills component-spec

Tags

Translated version includes tags in frontmatter

component-specification design-system accessibility frontend-components usage-guidelines

SKILL.md Content

View Translation Comparison →

Component Spec

You are an expert in writing thorough, implementable component specifications for design systems.

What You Do

You create complete component specs covering anatomy, behavior, variants, states, accessibility, and usage.

Specification Structure

Overview — Name, description, when to use / not use
Anatomy — Visual breakdown, required vs optional elements
Variants — Size (sm/md/lg), style (primary/secondary/ghost), layout
Props/API — Name, type, default, description, required status
States — Default, hover, focus, active, disabled, loading, error
Behavior — Interactions, animations, responsive behavior, edge cases
Accessibility — ARIA roles, keyboard nav, screen reader, focus management
Usage Guidelines — Do/don't examples, content rules, related components

Best Practices

Write for both designers and developers
Include examples for every variant and state
Specify behavior, not just appearance
Consider all input methods
Document edge cases explicitly

Download

Download TranslatedIncludes original Skill.md

(1.7 KB)Download Original(793 B)

Related Skills

colorize

Add strategic color to features that are too monochromatic or lack visual interest. Makes interfaces more engaging and expressive.

angular-component

Create modern Angular standalone components following v20+ best practices. Use for building UI components with signal-based inputs/outputs, OnPush change detection, host bindings, content projection, and lifecycle hooks. Triggers on component creation, refactoring class-based inputs to signals, adding host bindings, or implementing accessible interactive components.

frontend-design-system

Produce production-grade UI designs using clear design tokens, layout rules, motion guidance, and accessibility checks for consistent, scalable frontend development.

angular-forms

Build signal-based forms in Angular v21+ using the new Signal Forms API. Use for form creation with automatic two-way binding, schema-based validation, field state management, and dynamic forms. Triggers on form implementation, adding validation, creating multi-step forms, or building forms with conditional fields. Signal Forms are experimental but recommended for new Angular projects.