Fullstack design system — theme tokens, shadcn/ui patterns, dark mode, WCAG AA
A complete design-system reference — single-source-of-truth theme config, CSS variables and Tailwind integration, shadcn/ui component patterns, glassmorphism, dark mode, asset organization, WCAG AA accessibility
- What
- A complete design-system reference — single-source-of-truth theme config, CSS variables and Tailwind integration, shadcn/ui component patterns, glassmorphism, dark mode, asset organization, WCAG AA accessibility
- Cost
- Free
- Needs
- a Next.js + Tailwind project; shadcn/ui components if you want the ready-made patterns
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor — @travisjneuman's generic-fullstack-design-system skill (from the .claude collection): a complete design-system reference for full-stack applications. The agent works from a single-source-of-truth theme config (lib/theme.ts with color and spacing tokens), wires CSS variables into globals.css with light/dark palettes, integrates them into Tailwind, and applies shadcn/ui component patterns (buttons, forms, dialogs) with visual effects (glassmorphism, gradient backgrounds), dark mode via next-themes with a theme toggle, a public/ asset organization layout (logos, favicons, OG images, webmanifest), and WCAG AA accessibility guidance. It extends a base generic design system skill (color theory, typography scale, spacing system, component states) and points to shared design-pattern and UX-principle references. Honest caveats: pairs with the sibling fullstack skills (code-reviewer, design patterns) — most useful inside that .claude collection; Tailwind/shadcn-centric, so other CSS approaches need adaptation; GPU-accelerated animations are promised in the frontmatter but the real content is standard CSS, not perf engineering. License: the manifest records MIT (the manifest makes faith); the repo frontmatter carries no license field. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: a Next.js + Tailwind project; shadcn/ui components if you want the ready-made patterns Install "Fullstack design system — theme tokens, shadcn/ui patterns, dark mode, WCAG AA" for me. It gives my agent @travisjneuman's design-system reference: build a single-source-of-truth theme config (lib/theme.ts), wire CSS variables into globals.css with light/dark palettes, integrate them into Tailwind, apply shadcn/ui component patterns (buttons, forms, dialogs), add visual effects (glassmorphism, gradients), implement dark mode with next-themes and a theme toggle, organize public/ assets, and follow the WCAG AA accessibility guidance. MIT licensed (per the discovery manifest; the repo frontmatter carries no license field). Repository: https://github.com/travisjneuman/.claude/blob/main/skills/generic-fullstack-design-system/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "generic-fullstack-design-system". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. describe the app and brand tokens to apply, or ask the agent to audit an existing theme). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.