More screenshots
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsmodular design system
A category-switchable UI design system for building professional, non-generic web interfaces with Tailwind and React.
Free
modular design system
Example session with this skill installed
I need a minimal SaaS dashboard for a fintech app. Use React, Tailwind v4, and shadcn. Focus on data density and a professional zinc/cyan color palette. Set status to configured.
- Read your context and instructions
- Compiled the modular design system
- Generated the UI component
I have updated the design configuration for your fintech dashboard. The system is now set to saas-dashboard category with a dark-bold look to leverage the zinc and cyan palette while maintaining high data density.
Fintech Dashboard Configuration & Architecture
| Property | Value | Description |
|---|---|---|
| Category | saas-dashboard | Optimized for daily scanning and complex data views. |
| Look | dark-bold | Zinc neutrals with #22D3EE (Cyan) primary accent. |
| Density | compact | 2rem control heights and 14px base typography for data density. |
| Radius | subtle | 0.25rem corners for a professional, precise feel. |
| Stack | vite-react | Tailwind v4 + shadcn/ui + Lucide icons. |
// design-system/design.config.ts
export const config = {
status: "configured",
category: "saas-dashboard",
look: "dark-bold",
mode: "dark",
primary: "#22D3EE",
neutral: "zinc",
density: "compact",
radius: "subtle",
css: "tailwind-v4",
ui_library: "shadcn/ui"
} as const;
/* design-system/tokens.css snippet */
:root {
--brand: #22D3EE;
--radius: 0.25rem;
--control-h: 2rem;
--font-sans-stack: 'Inter', system-ui, sans-serif;
}
.dark {
--background: #0A0A0A;
--card: #111111;
--border: #262626;
--primary-hover: color-mix(in oklab, var(--brand) 88%, white);
}
Next steps
- Run
npx shadcn@latest add sidebar table command tabs sonnerto install the dashboard primitives. - Initialize the
DesignSystemprovider in yourmain.tsxto inject the data attributes. - Review the generated
layouts/saas-dashboard.tsxto verify the 240px sidebar structure.
main.tsx
TSX · React component
Example file from a real run - the skill writes it into your workspace.
Connects securely to your tools. The creator never sees your data.
About this skill
Designing professional web interfaces often falls into the trap of generic, overused templates. This skill provides a systematic, token-driven approach to building production-grade UIs across multiple categories using a single configuration file. It moves beyond basic prompting by enforcing a strict design system that handles everything from typography scales and spacing grids to motion physics and accessibility standards.
What it does
- Switchable architecture allows re-skinning an entire application by changing a single category line in a YAML config.
- Token-based styling manages colors, radius hierarchy, density, and motion through a unified CSS variable system.
- Category-specific layouts provide structural skeletons for SaaS dashboards, marketing sites, e-commerce stores, and documentation.
- Anti-slop enforcement strictly prevents common AI design failures like generic icon grids, purple gradients, and centered-everything layouts.
- Automatic component selection suggests and configures specific shadcn/ui components based on the project category.
How it works
- Configure tokens by editing the YAML block to set the category, look, brand colors, and technical stack.
- Onboard project via a short series of grounding questions to define the audience and primary user actions.
- Execute build as the agent generates a modular directory structure including a registry, provider, and layout files.
- Critique output against a quality checklist covering responsiveness, contrast, and performance budgets.
Frameworks & tools
Built for React environments using Tailwind CSS v3 or v4. It integrates with shadcn/ui, Lucide React, Framer Motion, and TanStack Table.
Why this beats prompting it yourself
Prompting a standard AI for a "modern dashboard" usually results in repetitive, low-contrast designs with poor hierarchy. This skill enforces professional design engineering principles, ensuring proper touch targets, semantic HTML, and specific layout rules that change based on whether you are building a data-heavy dashboard or a conversion-focused landing page.
Use cases
- Rapid prototyping of high-fidelity SaaS interfaces that look custom rather than stock.
- Restyling existing apps by swapping from a minimal-clean look to a brutalist or editorial aesthetic.
- Building accessible stores with pre-configured ecommerce patterns for product grids and cart flows.
Known limitations
Designed primarily for React and Tailwind environments. It requires manual installation of suggested UI libraries and fonts to achieve the full visual result.
How to use
Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean 5 days ago
- Free to download with an account
Requires
Node.js