Original
React Component Architecture
Design React components around stable identity, explicit ownership and composable behavior; preserve focus and local state while making feature boundaries easier to change.
Reactexperimental
← All bundles
19 CANONICAL SKILLS · V0.1.0
Modern React Applications
React and Next.js boundaries, TanStack Query, forms, Tailwind, design-system composition, accessible icons and complete frontend states.
Inspect the selection
View manifest ↗Run from a full toolkit checkout. This prints a file manifest, not an installer.
node tools/bundle.mjs resolve modern-reactExplore the frontend worked guide →
Original
React Rendering and Performance
Identify the actual cause of slow React interactions and reduce unnecessary work using measured state boundaries, subscriptions, scheduling and justified memoization.
Reactexperimental
Original
React State Ownership
Assign each UI value one authoritative owner across local state, URL state, form drafts, server caches and shared client stores, with explicit reconciliation rules.
Reactexperimental
Original
TanStack Query Engineering
Implement React Query data access with complete query identities, explicit freshness, cancellation, mutation reconciliation and isolated server-rendering caches.
TanStack Queryexperimental
Original
Next.js Application Architecture
Plan App Router features around route ownership, server/client execution, loading and failure boundaries, cache semantics and the actual deployment target.
Next.jsexperimental
Original
React Server Component Boundaries
Keep server-only data and execution out of client graphs while composing small interactive React islands with explicit serialization and hydration contracts.
Next.jsexperimental
Original
Tailwind CSS Engineering
Build maintainable utility-based interfaces with version-correct tokens, statically discoverable variants, responsive behavior and tested component composition.
Tailwind CSSexperimental
Original
Design System Architecture
Establish a small versioned system of semantic tokens, accessible primitives and feature compositions with clear ownership and migration criteria.
Design systemsexperimental
Original
Responsive UI Implementation
Implement layouts that adapt to container space, content length, input mode and zoom without hiding required actions or masking overflow.
Layoutexperimental
Original
Frontend Accessibility
Implement and verify accessible frontend interactions through native semantics, meaningful names, keyboard/focus behavior and explicit assistive-technology limits.
Accessibilityexperimental
Original
React Forms and Validation
Build React forms with a deliberate native or React Hook Form lifecycle, accessible errors, stable field identity and authoritative server validation.
React Hook Formexperimental
Original
URL and Navigation State
Use a validated URL as the authority for shareable frontend state while preserving browser history, unrelated parameters and safe navigation boundaries.
Routingexperimental
Original
Frontend Data Boundaries
Convert untrusted transport data into deliberate frontend view models without leaking service details, precision errors or unauthorized fields throughout the component tree.
Data accessexperimental
Original
Frontend Loading and Error States
Design initial, empty, refreshing, partially failed and mutation-pending UI states that preserve useful data and offer safe, attributable recovery.
Async UIexperimental
Original
Frontend Testing Strategy
Choose unit, component and browser checks around user-visible frontend contracts, with independent network fixtures and explicit integration coverage.
Testingexperimental
Original
Visual Regression and UI Verification
Use reproducible visual evidence to detect frontend regressions while preserving independent interaction, accessibility and content checks.
Testingexperimental
Original
Frontend Security Boundaries
Keep untrusted content, navigation, credentials and server effects behind explicit boundaries while testing the real browser-to-server trust model.
Securityexperimental
Original
Icon System Integration — React Icons
Select and integrate a coherent icon family using React Icons, Lucide or an existing library with accessible meaning, bounded imports and preserved upstream license information.
Iconsexperimental
Original
Headless Components and shadcn/ui
Compose installed headless primitives and shadcn/ui source components without breaking keyboard semantics, local changes or version-specific APIs.
Design systemsexperimental
Tailor context, not a second copy.
Pick the skill needed for the current task. A private adapter supplies project-specific roots, command IDs, accepted contracts, and policy. It should pin and verify the public revision before exposing guidance to an internal agent.
Skill effectiveness remains experimental. Package validation and content hashes do not establish host compatibility, artifact authenticity, or permission to execute.
Read the private-adapter boundary ↗