skills.rest
lgsalinasp7
lgsalinasp7COMMUNITY
Explore all skills by this author β†’
Website𝕏@lgsalinaspGitHub

frontend-design

Create production-grade frontend interfaces with cohesive typography, color systems, and responsive layouts.

Updated Aug 23, 2026
Search Tags:#typography#design#frontend#react#css#ui-design#aesthetics
One-click install
npx skills add https://github.com/lgsalinasp7/appInstituto --skill frontend-design-lgsalinasp7
Or copy as Structured Prompt for Agentβ–Ό
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/lgsalinasp7/appInstituto/tree/main/.cursor/skills/frontend-design
Command: npx skills add https://github.com/lgsalinasp7/appInstituto --skill frontend-design-lgsalinasp7

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create distinctive, production-grade frontend interfaces with high design quality, turning abstract ideas into polished, implementable UI solutions that feel intentional and refined.

Core Features & Use Cases

  • Define a bold aesthetic direction and deliver production-ready frontend components, pages, or dashboards with cohesive typography, color systems, and motion.
  • Implement accessible, responsive UI with a cohesive design system suitable for web apps and marketing sites.
  • Use Case: Design a landing page or a component library that differentiates a brand through typography, spacing, and motion.

Quick Start

Describe your target frontend concept and request a polished, production-ready component or page that matches the chosen aesthetic direction.

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 production-grade frontend UI with a cohesive design system?β–Ό

Frontend UI design applies a bold aesthetic direction with robust typography, color systems, and responsive layouts to deliver polished, implementable interfaces that differentiate a brand and feel intentionally refined.

What's the best way to build a distinctive React component library that stands out?β–Ό

Building a distinctive React component library requires defining a bold aesthetic direction and applying cohesive typography, spacing, and motion to differentiate the brand through production-ready, accessible UI components.

Can I use this approach to design both marketing landing pages and web app dashboards?β–Ό

Yes, this frontend design approach applies to building both marketing landing pages and web app dashboards, delivering cohesive, accessible, and responsive interfaces with a unified design system across different application contexts.

How do I ensure my frontend design is accessible and responsive across devices?β–Ό

Accessible and responsive frontend design requires implementing cohesive design system standards that address robust typography, color contrast, and fluid layouts, ensuring deliverable-ready code works across various devices and user needs.

Does this frontend design approach require pre-existing CSS or UI design frameworks?β–Ό

No pre-existing CSS or UI design frameworks are required as dependencies. You can start by describing your target frontend concept and requesting a polished, production-ready component or page that matches your chosen aesthetic direction.

Related Skills

Explore More Design & Creative Skills→
hi-yuki-922hi-yuki-922
1

i-teach-impeccable

Gather design context from codebase and user input into CLAUDE.md.

Community
Intermediate
Selfdb-ioSelfdb-io

frontend-design

Generate production-grade frontend interfaces with CSS variables and design tokens.

Community
Basic
projectmilujuprojectmiluju

ui

Define UI design system tokens and component specifications for web products.

Community
Intermediate
alter123-zzalter123-zz
18

frontend-design

Generate production-grade frontend interfaces with design systems and accessible components.

Community
Intermediate