Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/marcusgoll/Spec-Flownpx agentmods add skills/marcusgoll/spec-flow/shadcn-integrationWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/marcusgoll/spec-flow/shadcn-integration)<a href="https://agentmods.dev/skills/marcusgoll/spec-flow/shadcn-integration"><img src="https://agentmods.dev/badge/skills/marcusgoll/spec-flow/shadcn-integration.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00053 | $0.02604 |
| Opus 5 | $0.00026 | $0.01302 |
| Sonnet 5 | $0.00011 | $0.00521 |
| Haiku 4.5 | $0.00005 | $0.00260 |
Grade A, and why
shadcn-integration scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 344 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Key Principle: OKLCH tokens remain the source of truth. shadcn CSS variables are aliases that reference OKLCH tokens, not hardcoded values.
This skill is auto-invoked when:
- User runs
/init --tokens --shadcn - User asks to add shadcn components to a project
- Customizing shadcn theme colors or styles
- Setting up Next.js with shadcn/ui
Benefits:
- WCAG-compliant colors via OKLCH with perceptual uniformity
- Full shadcn component library compatibility
- 8 customization options without manual CSS editing
- Automatic dark mode support
- Menu-specific theming with variants
<quick_start> <trigger_pattern> Auto-invoke when:
/init --tokens --shadcncommand is run- User asks to "add shadcn" or "setup shadcn"
- User wants to customize theme colors
- Setting up new Next.js project with components </trigger_pattern>
<basic_workflow> Step 1: Run the questionnaire (8 questions)
/init --tokens --shadcn
Step 2: Review generated files
design/systems/shadcn-variables.css- CSS variablescomponents.json- shadcn CLI configcomponents/ui/menu-variants.ts- Menu styling
Step 3: Import in globals.css
@import '../design/systems/shadcn-variables.css';
Step 4: Add components
npx shadcn@latest add button card dropdown-menu
</basic_workflow>
<immediate_value> Before:
- Manual theme.css editing with hardcoded HSL values
- Inconsistent color contrast
- No systematic menu theming
- Dark mode requires manual CSS duplication
After:
- 8 questions → complete theme system
- OKLCH ensures WCAG-compliant contrast
- Menu variants via tailwind-variants
- Automatic dark mode via CSS variables </immediate_value> </quick_start>
Use AskUserQuestion tool with these questions in sequence:
- Style Preset → Determines shadcn style + density
- Base Color → Generates OKLCH primary scale (11 shades)
- Theme Mode → Configures light/dark/system preference
- Icon Library → Sets package and components.json config
- Font Family → Configures next/font
- Border Radius → Sets --radius CSS variable
- Menu Color → Generates menu background tokens
- Menu Accent → Generates menu active state tokens
Run the token generation script:
node .spec-flow/scripts/node/generate-shadcn-tokens.js --config answers.json
Generated files:
design/systems/shadcn-variables.css- shadcn CSS variable aliasesdesign/systems/tokens.json- Full token definitionscomponents.json- shadcn CLI configurationcomponents/ui/menu-variants.ts- Menu styling with tailwind-variants
Based on questionnaire answers:
# Icon library (based on choice)
pnpm add lucide-react # or @heroicons/react or @phosphor-icons/react
# shadcn dependencies
pnpm add tailwindcss-animate class-variance-authority clsx tailwind-merge
# For menu variants
pnpm add tailwind-variants
Update app/layout.tsx with font configuration:
import { Inter } from 'next/font/google'
const fontSans = Inter({
subsets: ['latin'],
variable: '--font-sans',
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={fontSans.variable}>
<body>{children}</body>
</html>
)
}
Now users can add components that automatically use the generated theme:
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add dropdown-menu
npx shadcn@latest add dialog
Components will use CSS variables from shadcn-variables.css.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 344 lines · 53 tokens per session scan A 3b783459279c
shadcn-integration is a skill published in the GitHub repository marcusgoll/Spec-Flow (92 stars, last pushed 4mo ago), licensed MIT. It adds 53 tokens to every session and 2,604 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
skill-frontend-ux-guardrails
Apply frontend UX quality gates for SaaS dashboards, product screens, modals, tables, forms, responsive layouts, overflow fixes, accessibility, visual validation, spelling, and reduction of UI rework.
skill-modern-ui-patterns
Use for professional SaaS UI implementation and refinement in React, TypeScript, Tailwind, dashboards, admin panels, tables, forms, settings, billing, onboarding, responsive layouts, component states, and design-system consistency.
skill-impeccable
Orquestra melhorias de frontend inspiradas no Impeccable a partir de pedidos conversacionais de design, UX, acessibilidade, responsividade, tipografia, layout, cor, motion, clareza, hardening e polish.
mobile-only-responsive-navigation
Mobile-only responsive navigation guidance for RTL Persian sites. Use when improving hamburger menus, drawers, touch targets, and mobile theme controls without changing desktop layout.
mobile-ux-responsive-navigation-notes
Curated notes adapted from reviewed public Agent Skill repositories for mobile UX, responsive navigation, accessibility, and anti-slop frontend polish.
ui-styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns…