skills.rest
shawn-sandy
shawn-sandyCOMMUNITY
Explore all skills by this author →
Website𝕏@shawnsandyGitHub

kit-core

Initialize React+TypeScript projects and generate fpkit-style accessible components with dependency resolution.

Updated Apr 21, 2026
Search Tags:#typescript#accessibility#react#scaffolding#component generation#sass#css layering
One-click install
npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill kit-core
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kit-core
Source: https://github.com/shawn-sandy/agentic-acss-plugins/tree/main/plugins/acss-kit/skills/kit-core
Command: npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill kit-core

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill orchestrates the end-to-end workflow for generating fpkit-style accessible React components directly into your project, including first-run setup and dependency-aware component generation.

Core Features & Use Cases

  • Project initialization: Detects React + TypeScript, verifies Sass availability, and records target paths in .acss-target.json.
  • Foundation bootstrapping: Copies ui.tsx and foundation.css (plus sass foundation tree) idempotently and guides correct imports and CSS layer ordering.
  • Dependency-aware component generation: Resolves component reference contracts, shows a dependency/file tree, and generates bottom-up so composites include their required parts.
  • Accessibility-first output: Ensures generated components use fpkit patterns such as aria-disabled for interactive disabled states and visible focus styling.
  • Creator Mode support: Produces a paste-ready TSX snippet from a natural-language description by resolving it to the canonical component reference.

Quick Start

Run kit-core to generate a Button into your React + Sass project by saying: "Generate the Button component into my project."

Frequently Asked Questions about kit-core

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate accessible React components with TypeScript and Sass?▼

Generate accessible React components with TypeScript and Sass by orchestrating local file writes that produce fpkit-style artifacts with aria-disabled and focus-visible patterns.

Do I need Sass and TypeScript to scaffold React components?▼

Yes, you need Sass and TypeScript to scaffold React components. The initialization process detects React and TypeScript, verifies Sass availability, and records target paths in .acss-target.json.

How does dependency-aware component generation work for React projects?▼

Dependency-aware component generation resolves component reference contracts, displays a dependency and file tree, and generates artifacts bottom-up from leaf to root so composites include required parts.

How do I set up CSS layer ordering and foundation styles for React components?▼

Set up CSS layer ordering by bootstrapping foundation.css and the Sass foundation tree idempotently, which guides correct imports and manages stack metadata within your .acss-target.json file.

Can I create React components from a natural language description?▼

Yes, you can create React components from a natural language description using Creator Mode, which resolves the text to a canonical component reference and produces a paste-ready TSX snippet.

What accessibility patterns are applied when generating React UI components?▼

Generated React UI components apply fpkit accessibility patterns, specifically enforcing aria-disabled attributes for interactive disabled states and including visible focus styling for keyboard navigation.

Related Skills

Explore More Software Engineering Skills→
shawn-sandyshawn-sandy

setup

Bootstrap an acss-kit React project by generating configuration, theme files, and CSS/SCSS imports.

Community
Advanced
rahulgupta2018rahulgupta2018

modern-css-design-systems

Implement Tailwind v4 design tokens and accessible Radix primitives for React UIs.

Community
Advanced
10knamesmore10knamesmore

frontend-react

Enforce React component patterns and styling conventions for Vite and TypeScript projects.

Community
Intermediate
shawn-sandyshawn-sandy

component-icon

Generate an accessible React Icon component with inline SVG paths and ARIA behavior.

Community
Basic