搵技能.../

Building Components | Skills Pool

技能檔案

Building Components

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.

jasperteo0 星標2026年3月31日

職業
分類: 技術文檔

技能內容

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

相關技能

快速安裝

Building Components

npx skills add jasperteo/jasperteo.com

下載 Skill 打開源碼倉庫

作者: jasperteo
星標: 0
更新時間: 2026年3月31日
職業

本頁內容

01When to use this skill

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

02

References

網頁開發人員

My Workflow

Guides users through creating effective Agent Skills. Use when you want to create, write, or author a new skill, or asks about skill structure, best practices, or SKILL.md format.

Create Instructions

Create an instructions file (.instructions.md) for a project rule or convention.

microsoft184.0k

自動化工具

Init

Generate or update chat customization files for AI coding agents

microsoft184.0k

Everything Claude Code Conventions

Development conventions and patterns for everything-claude-code. JavaScript project with conventional commits.

Codebase Onboarding

分析一个陌生的代码库，并生成一个结构化的入门指南，包括架构图、关键入口点、规范和一个起始的CLAUDE.md文件。适用于加入新项目或首次在代码仓库中设置Claude Code时。

Ui Demo

Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.

網頁開發人員