Agent skill · design visual · sickn33
design-taste-frontend
Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.
Why this skill is useful
Provides specific design rules and architectural conventions for high-agency frontend development that the AI wouldn't reliably generate on its own.
What it needs
Requires next.js, react, tailwindcss installed locally. About 11k tokens when loaded. Last updated 2026-08-07. 44,571 stars on the source repository.
What this skill does
High-Agency Frontend Skill When to Use Use when the user asks to create, improve, or review frontend UI with strong design taste and anti-generic constraints. Use when React, Next.js, Tailwind, motion, component states, typography, spacing, color, or responsive behavior need senior-level design judgment. Use when the output must override common LLM UI biases such as centered heroes, purple gradients, card overuse, poor states, and fragile layouts. Example User request: Review this interface with @design-taste-frontend, identify the highest-impact design problems, and propose an implementation-ready improvement. Limitations This skill provides frontend design and implementation guidance; it does not replace project-specific product requirements, accessibility review, or user testing. Verify framework versions, installed dependencies, responsive behavior, and build output in the target repository before treating generated UI as production-ready. Do not force these design rules when the existing product, brand system, or platform conventions require a different visual direction. 1. ACTIVE BASELINE CONFIGURATION DESIGNVARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos) MOTIONINTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics) VISUALDENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data) AI Instruction: The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7. 2. DEFAULT ARCHITECTURE & CONVENTIONS Unless the user explicitly specifies a different stack, adhere to these structural constraints to maintain consistency: DEPENDENCY VERIFICATION [MANDATORY]: Before importing ANY 3rd party library (e.g. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sickn33/design-taste-frontend--7d7f7b