pedronauck/building-components
skills/community/building-components/SKILL.md
Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, or writing component documentation.
$ install --global
skillsauthnpx skillsauth add pedronauck/skills building-componentsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 29, 2026, 9:48 AM16.8s16 files scanned
SKILL.md
- name:
- building-components
- description:
- Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, or writing component documentation.
Building Components
When to use this skill
Use when the user is:
- Building new UI components (primitives, components, blocks, templates)
- Implementing accessibility features (ARIA, keyboard navigation, focus management)
- Creating composable component APIs (slots, render props, controlled/uncontrolled state)
- Setting up design tokens and theming systems
- Publishing components to npm or a registry
- Writing component documentation
- Implementing polymorphism or as-child patterns
- Working with data attributes for styling/state
References
- definitions.mdx - Artifact taxonomy (primitives, components, blocks, templates)
- principles.mdx - Core principles for component design
- accessibility.mdx - ARIA, keyboard navigation, WCAG compliance
- composition.mdx - Composable component patterns
- as-child.mdx - The as-child pattern for element polymorphism
- polymorphism.mdx - Polymorphic component patterns
- types.mdx - TypeScript typing patterns for components
- state.mdx - Controlled vs uncontrolled state management
- data-attributes.mdx - Using data attributes for styling and state
- design-tokens.mdx - Design token systems and theming
- styling.mdx - Component styling approaches
- registry.mdx - shadcn-style registry distribution
- npm.mdx - Publishing components to npm
- marketplaces.mdx - Component marketplace distribution
- docs.mdx - Writing component documentation
Related Skills
pedronauck/ddd-master
testing
VerifiedTrustedCommunity
Assess DDD fit; discover domains with EventStorming, define language and bounded contexts, and design aggregates, value objects, events, and repositories. Excludes architecture-only audits, product specs, and CQRS/Event Sourcing catalogs.
604SKILL.mdUpdated Sep 6, 2026
pedronauck/ratatui-tui
development
VerifiedTrustedCommunity
Build terminal UIs with ratatui following 2026 Rust best practices. Use when: (1) Creating new TUI apps, (2) Adding widgets/layouts, (3) Keyboard navigation/state management, (4) Image integration via ratatui-image, (5) Async event handling, (6) Release optimization. Covers v0.30.0+ API, Elm Architecture, StatefulWidget, color-eyre.
604SKILL.mdUpdated Sep 6, 2026
pedronauck/game-changing-features
development
VerifiedTrustedCommunity
Find 10x product opportunities and high-leverage improvements. Use when user wants strategic product thinking, mentions '10x', wants to find high-impact features, or says 'what would make this 10x better', 'product strategy', or 'what should we build next'.
604SKILL.mdUpdated Sep 6, 2026
pedronauck/brainstorming
development
VerifiedTrustedCommunity
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
604SKILL.mdUpdated Sep 6, 2026