skills.rest
lidge-jun
lidge-junCOMMUNITY
Explore all skills by this author →
𝕏@claudeebumGitHub

dev-frontend

Generate frontend code with distinctive aesthetics and accessibility guardrails.

5|Updated Feb 26, 2026
Search Tags:#design#frontend#react#ui/ux#nextjs#aesthetics
One-click install
npx skills add https://github.com/lidge-jun/cli-jaw-skills --skill dev-frontend-lidge-jun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dev-frontend
Source: https://github.com/lidge-jun/cli-jaw-skills/tree/main/dev-frontend
Command: npx skills add https://github.com/lidge-jun/cli-jaw-skills --skill dev-frontend-lidge-jun

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you build unique, high-quality frontend interfaces that avoid generic "AI slop" aesthetics, ensuring your designs are memorable and professional.

Core Features & Use Cases

  • Aesthetic Direction: Guides you in choosing and implementing bold design principles (typography, color, layout, motion).
  • Anti-Slop Enforcement: Provides strict rules to prevent common AI-generated design clichés.
  • Stack-Specific Guidance: Offers tailored advice for React, Next.js, and Vanilla HTML/CSS/JS projects.
  • Use Case: When tasked with designing a new SaaS dashboard, use this Skill to define a unique visual identity, select appropriate fonts and colors, and implement responsive layouts that stand out.

Quick Start

Use the dev-frontend skill to generate a React component for a user profile card with a dark luxury aesthetic.

Frequently Asked Questions about dev-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I avoid generic AI design patterns when generating frontend UI code?▼

To avoid generic AI design patterns, this Skill enforces strict anti-slop rules and provides modular design references. It guides you in implementing bold typography, color, layout, and motion to ensure your frontend interfaces are distinctive and memorable.

Can I get stack-specific UI and aesthetic guidance for React and Next.js?▼

Yes, this Skill provides tailored guidance for React, Next.js, and Vanilla HTML/CSS/JS projects. It delivers stack-specific references to help you implement distinctive aesthetics and production-grade code for your chosen frontend framework.

How do I build a SaaS dashboard with a distinctive visual identity?▼

To build a SaaS dashboard with a distinctive visual identity, this Skill defines bold design principles and enforces anti-slop rules. It helps you select unique fonts, colors, and responsive layouts that stand out from generic AI interfaces.

Does this frontend code generator enforce performance and accessibility guardrails?▼

Yes, this frontend code generator enforces performance and accessibility guardrails alongside aesthetic direction. It ensures the production-grade UI code it generates meets essential technical standards while maintaining distinctive visual design.

What is the best way to implement motion and design thinking in frontend projects?▼

The best way to implement motion and design thinking is through this Skill's modular references. It provides specialized guidance on aesthetic direction, ensuring your frontend project avoids common AI clichés and achieves professional results.

Related Skills

Explore More Design & Creative Skills→
MakisuoMakisuo
1.6k

clickhousectl-local-dev

Install and configure a local ClickHouse environment with clickhousectl.

Community
Intermediate
joshua3403joshua3403

phase-9-deployment

Automate production deployments with builds, configurations, and rollback plans.

Community
Advanced
travisjneumantravisjneuman
88

generic-feature-developer

Guide feature development with architecture patterns and decision frameworks.

Community
Intermediate
gotalabgotalab
406

frontend-design

Generate production-grade frontend interfaces with bold aesthetics and accessibility.

Community
Intermediate