Frontend Patterns Skill
by Boubacar B
Claude can write frontend code. What it needs is a design system vocabulary to write CONSISTENT frontend code. This skill gives it that vocabulary, so every button, form, and layout follows the same rules across your entire app.
- Eliminate AI-slop patterns like identical card grids and hero gradients.
- Integrate GSAP-driven motion and magnetic buttons by default.
- Generate brand-aligned, photorealistic imagery via Kie media orchestration.
$8
· or 40 creditsSecure checkout via Stripe
Included in download
- Eliminate AI-slop patterns like identical card grids and hero gradients.
- Integrate GSAP-driven motion and magnetic buttons by default.
- terminal, browser, network automation included
See it in action
You say
Build a high-end landing page for a pediatric dental office.
Your agent does
DESIGN_PREFLIGHT: skeleton=pass build_log=pass agency=pass volta_floor=pass interactions=pass photos=pass reflex_check=pass category_reflex=pass register=brand
Now building: Storybook Blob archetype. Initializing GSAP with Spectral/Public Sans pairing and Navy/Coral/Gold palette. Generating 16:9 hero via Kie: "Wide-angle cheerful child in dental chair, soft blue tones."
Frontend Patterns Skill
by Boubacar B
Claude can write frontend code. What it needs is a design system vocabulary to write CONSISTENT frontend code. This skill gives it that vocabulary, so every button, form, and layout follows the same rules across your entire app.
$8
· or 40 creditsSecure checkout via Stripe
Included in download
- Eliminate AI-slop patterns like identical card grids and hero gradients.
- Integrate GSAP-driven motion and magnetic buttons by default.
- terminal, browser, network automation included
- Instant install
See it in action
You say
Build a high-end landing page for a pediatric dental office.
Your agent does
DESIGN_PREFLIGHT: skeleton=pass build_log=pass agency=pass volta_floor=pass interactions=pass photos=pass reflex_check=pass category_reflex=pass register=brand
Now building: Storybook Blob archetype. Initializing GSAP with Spectral/Public Sans pairing and Navy/Coral/Gold palette. Generating 16:9 hero via Kie: "Wide-angle cheerful child in dental chair, soft blue tones."
About This Skill
The problem
Standard AI-generated websites often look like generic templates, characterized by predictable skeletons, overused font pairings, and clinical stock imagery. Developers struggle to escape "AI slop" and "reflex" designs that fail to capture a brand's specific intentionality.
What it does
- Enforces the Volta design standard, requiring high-caliber intentionality and specific emotional targeting over generic layouts.
- Executes a mandatory pre-build sequence including archetype selection, hardware design rules, and a 6-point self-verification checkpoint.
- Automatically integrates cinematic baselines like GSAP-driven scroll reveals, custom cursors, and magnetic interaction primitives.
- Blocks 10 specific "AI tells" including side-stripe borders, reflex fonts like Inter or DM Sans, and identical card grids.
- Orchestrates Kie media generation to produce photorealistic, context-aware imagery that matches the site's unique color palette and composition.
Frameworks & tools
Next.js 14+ (App Router), Tailwind CSS, GSAP, Framer Motion, Lenis Smooth Scroll, and Kie Media API.
Why this beats prompting it yourself
Simple prompting inevitably reaches for training-data defaults and overused layout skeletons. This skill forces a rigorous design-first workflow that requires competitive research and archetype declaration before a single line of code is written.
Use cases
- Building high-conversion landing pages for premium service businesses.
- Creating cinematic agency portfolios that avoid the "Bootstrap reskin" look.
- Developing agent-readable DOMs that pass accessibility and AI-scraping audits.
- Rapidly prototyping brand-specific demo sites with custom generated assets.
Known limitations
Requires Next.js 14+ with App Router; not designed for legacy PHP or static HTML/CSS stacks without a React runtime for components.
Use Cases
- Eliminate AI-slop patterns like identical card grids and hero gradients.
- Integrate GSAP-driven motion and magnetic buttons by default.
- Generate brand-aligned, photorealistic imagery via Kie media orchestration.
- Enforce semantic HTML and ARIA roles for agent-ready accessibility.
How to Install
mkdir -p ~/.claude/skills && curl -sL https://www.agensi.io/api/install/frontend-patterns-skill -o /tmp/frontend-patterns-skill.zip && unzip -o /tmp/frontend-patterns-skill.zip -d ~/.claude/skills && rm /tmp/frontend-patterns-skill.zipFree skills install directly. Paid skills require purchase - use the download button above after buying.
Reviews
No reviews yet - be the first to share your experience.
Only users who have downloaded or purchased this skill can leave a review.
Early access skill
Be the first to review this skill.
Only users who have downloaded or purchased this skill can leave a review.
Security Scanned
Passed automated security review
Permissions
Allowed Hosts
Creator
Frequently Asked Questions
Learn More About AI Agent Skills
More Premium Skills
World-Class Site & App Design
Every AI-built UI looks generic and templated. This skill teaches your agent to actually match the design to the project, the industry, and the audience.
B2B Leadbot: Turn Website Visitors into Warm Leads
Build a production-ready, Claude-powered chat widget that answers visitors' questions in plain language and quietly delivers every warm lead to the owner's inbox.
designing-hybrid-context-layers
Architects the right retrieval strategy for every query — teaching your agent when to use RAG, a knowledge graph, or a temporal index instead of defaulting to vector search for everything.
ai-automation-qa-pack
Professional QA & UAT documentation generator for AI automation agencies and complex agent deployments.