skills.rest
raulisai
raulisaiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Generates production-grade frontend interfaces with distinctive typography, color, motion, and layout design.

Updated Jun 8, 2026
Search Tags:#typography#frontend#react#css#dashboard#ui design#web components
One-click install
npx skills add https://github.com/raulisai/eva02 --skill frontend-design-raulisai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/raulisai/eva02/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/raulisai/eva02 --skill frontend-design-raulisai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building web interfaces often results in generic, cookie-cutter designs with overused fonts, cliched color schemes, and predictable layouts. This Skill guides the creation of distinctive, production-grade frontend code that commits to a clear aesthetic direction instead of defaulting to generic AI-generated visuals. ## Core Features & Use Cases - Aesthetic Direction Planning: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, minimal, maximalist) before writing any code. - Design System Guidance: Provides concrete rules for typography pairing, CSS variable-based color themes, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - EVA Platform Overrides: Respects the EVA multi-tenant operations platform conventions, including org_id data boundaries, existing design systems, and the Approval Engine flow for sensitive actions. - Use Case: Ask for a new dashboard page for the EVA control panel, and receive working React/HTML/CSS code with a cohesive visual identity, staggered load animations, and tenant-safe data handling. ## Quick Start Ask the agent to build a responsive dashboard page for the EVA platform with a distinctive visual style and production-ready HTML, CSS, and React code.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a distinctive frontend design instead of generic AI output?▼

Commit to one clear aesthetic direction such as brutalist, editorial, or retro-futuristic before coding, then execute it precisely. Pair a distinctive display font with a refined body font, use dominant colors with sharp accents via CSS variables, and avoid defaults like Inter, Roboto, or purple gradients.

What frameworks does this frontend design skill support?▼

It produces working code in HTML/CSS/JS, React, Vue, and similar frameworks. For React projects it recommends the Motion library for animations, while plain HTML implementations should prioritize CSS-only animation solutions.

Can I use this skill with the EVA platform dashboard?▼

Yes, it includes EVA-specific overrides that preserve existing design systems, accessibility, auth states, and responsive behavior. UI that triggers production, money, or tenant-data actions must surface the existing Approval Engine flow rather than adding direct action buttons.

Does the skill handle multi-tenant data security in UI code?▼

Yes, it explicitly prohibits exposing secrets or tenant data in client UI. Protected data must respect org_id claims and server-side authorization boundaries when rendering interfaces.

What fonts and colors should I avoid in AI-generated web design?▼

Avoid overused families like Inter, Roboto, Arial, and system fonts, plus cliched schemes such as purple gradients on white backgrounds. Choose characterful font pairings and dominant colors with sharp accents instead of evenly-distributed timid palettes.

When should I use minimal versus maximalist frontend design?▼

Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate animations and effects, while minimalist designs need restraint, precise spacing, and refined typography. Both work when executed with intentionality.

Related Skills

Explore More Design & Creative Skills→
bfree-trainerbfree-trainer
60

teach-impeccable

Capture project design context and persist it to AI configuration.

Official
Intermediate
hamzaPixlhamzaPixl
2

admin-dashboard

Scaffold a Next.js admin dashboard with shadcn/ui, RBAC UI, and backend API integration.

Community
Intermediate
AI-Staffing-Solution-Consultants-LLCAI-Staffing-Solution-Consultants-LLC

agency-ui-designer

Creates design systems, component libraries, and accessible interface specifications with CSS design tokens.

Official
Intermediate
sheriaxsheriax

clerk-custom-ui

Create custom Clerk authentication flows and theme components with React hooks.

Official
Intermediate