skills.rest
snhrm
snhrmCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generates web components and pages with intentional typography, color, and spatial composition choices.

Updated Aug 23, 2026
Search Tags:#design#ui#web development#frontend#react#css
One-click install
npx skills add https://github.com/snhrm/slidini --skill frontend-design-snhrm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/snhrm/slidini/tree/main/.agents/skills/frontend-design
Command: npx skills add https://github.com/snhrm/slidini --skill frontend-design-snhrm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating visually distinctive and high-quality frontend interfaces that move beyond generic AI aesthetics, ensuring production-grade functionality and exceptional design.

Core Features & Use Cases

  • Bespoke UI Creation: Designs and implements unique web components, pages, and applications with a strong, intentional aesthetic direction.
  • Aesthetic Precision: Focuses on typography, color, motion, and spatial composition to create memorable and polished user experiences.
  • Use Case: A user wants to design a landing page for a new luxury brand. This Skill can be used to generate a sophisticated, minimalist design with elegant typography, a refined color palette, and subtle animations that convey exclusivity and quality.

Quick Start

Use the frontend-design skill to create a React component for a product card with a brutalist aesthetic.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate frontend UI designs that don't look like generic AI outputs?▼

You can generate production-grade React components using this Skill by specifying your desired aesthetic, such as brutalist or minimalist, and it will implement the functional code with precise typography, color, and motion choices.

Can I use this to create a complete web page for a specific brand aesthetic?▼

Yes, this Skill supports generating UIs for various scales, from individual web components and posters to full applications and pages, implementing functional code with high design quality and unique aesthetics.

What is the best way to build a React component with a brutalist aesthetic?▼

This approach distinguishes itself by focusing on unique aesthetics and intentional design choices like motion and spatial composition, ensuring production-grade functionality rather than relying on generic templates.

Does this Skill require any specific UI libraries or dependencies to function?▼

A limitation is that while it generates distinctive, production-grade frontend interfaces, achieving the desired unique aesthetic requires providing clear intentional design directions for typography, color, and motion.

Related Skills

Explore More Design & Creative Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
rizaldiemrizaldiem

frontend-design

Create production-ready frontend interfaces with deliberate typography, color systems, and motion.

Community
Advanced
sami-abdulsami-abdul
3

frontend-design

Outline and implement bold frontend design systems with typography, color, motion, and CSS.

Community
Advanced
bonnguyenitcbonnguyenitc
19

frontend-design

Create distinctive frontend interfaces with design tokens and responsive layouts.

Community
Advanced