Agent skill · design visual · aradotso
taste-skill-frontend-design
taste-skill-frontend-design — an agent skill for coding agents.
Why this skill is useful
Adds a set of design instruction files that fundamentally enhance the AI's ability to create modern, premium-quality frontend interfaces.
What it needs
About 6k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
bash Clone the repo git clone https://github.com/Leonxlnx/taste-skill.git Copy the skill you want into your project root cp taste-skill/SKILL.md ./SKILL.md Or for a specific skill cp taste-skill/redesign-skill/SKILL.md ./SKILL.md cp taste-skill/soft-skill/SKILL.md ./SKILL.md cp taste-skill/minimalist-skill/SKILL.md ./SKILL.md cp taste-skill/output-skill/SKILL.md ./SKILL.md project/ ├── SKILL.md ← main taste-skill ├── REDESIGNSKILL.md ← redesign-skill ├── OUTPUTSKILL.md ← output-skill └── src/ @SKILL.md redesign this hero section Read SKILL.md and follow it. Now redesign the landing page hero. Follow the rules in SKILL.md. Rewrite src/components/Hero.tsx. DESIGNVARIANCE: 7 MOTIONINTENSITY: 5 VISUALDENSITY: 3 DESIGNVARIANCE: 8 MOTIONINTENSITY: 6 VISUALDENSITY: 2 DESIGNVARIANCE: 3 MOTIONINTENSITY: 2 VISUALDENSITY: 9 @SKILL.md Build a pricing section for a SaaS product called "Volta". Use DESIGNVARIANCE: 7, MOTIONINTENSITY: 5, VISUALDENSITY: 3. tsx // The AI will write something like this instead of a generic table export function PricingSection() { return ( <section className="py-32 px-6 bg-neutral-950"> <div className="max-w-5xl mx-auto"> <p className="text-xs uppercase tracking-widest text-neutral-500 mb-4"> Pricing </p> <h2 className="text-6xl font-semibold text-white leading-[1.05] mb-20"> Simple,<br />honest pricing. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/taste-skill-frontend-design