skills.rest
FindMalek
FindMalekCOMMUNITY
Explore all skills by this author →
Website𝕏@foundmalekGitHub

frontend-design

Generate production-grade frontend interfaces from high-level requirements.

9|2|Updated Nov 10, 2025
Search Tags:#design#ui#frontend#react#css#ux#aesthetics
One-click install
npx skills add https://github.com/FindMalek/dukkani --skill frontend-design-findmalek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/FindMalek/dukkani/tree/main/.cursor/skills/frontend-design
Command: npx skills add https://github.com/FindMalek/dukkani --skill frontend-design-findmalek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Distinctive, production-grade frontend design that helps teams avoid generic AI aesthetics and deliver polished user interfaces quickly.

Core Features & Use Cases

  • Production-grade frontend design for websites, dashboards, landing pages, components, and UI artifacts with careful typography, color systems, motion, and accessibility.
  • Framework-agnostic guidance plus implementation-ready code samples in HTML/CSS/JS and React.
  • Use Case: When asked to deliver a branded web UI, generate a cohesive aesthetic direction and a ready-to-run component that matches the brief.

Quick Start

Describe your desired aesthetic direction and deliver a ready-to-run frontend component that embodies it.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create production-grade frontend interfaces from high-level requirements?▼

Create production-grade frontend interfaces by translating high-level requirements into ready-to-run code samples with cohesive aesthetic direction, typography, color systems, and motion for websites, dashboards, and landing pages.

Can I generate React UI components that match a specific aesthetic direction?▼

Yes, you can generate React UI components that match your aesthetic direction by providing a brief, which yields implementation-ready code samples with careful typography and accessibility guidelines.

Does this approach to frontend design work with plain HTML, CSS, and JS?▼

Yes, this frontend design approach works with plain HTML, CSS, and JS, providing framework-agnostic guidance and implementation-ready code samples alongside its React capabilities.

What is the best way to avoid generic AI aesthetics in web UI design?▼

Avoid generic AI aesthetics in web UI design by applying a distinctive, production-grade aesthetic direction that delivers polished user interfaces with careful color systems and motion.

How do I ensure accessibility guidelines are met in generated frontend code?▼

Ensure accessibility guidelines are met in generated frontend code by applying careful design principles that produce production-grade interfaces adhering to required accessibility standards across HTML/CSS/JS and React.

Related Skills

Explore More Design & Creative Skills→
BidingCCBidingCC
1.9k

frontend-design

Generate production-grade HTML/CSS/JS or framework-specific frontend code from requirements.

Community
Advanced
pinion05pinion05
3

frontend-design

Generate production-ready HTML/CSS/JS or framework-specific frontend components with cohesive typography, color, and motion.

Community
Advanced
hendrax5hendrax5

phase-6-ui-integration

Implement frontend UI and integrate it with backend APIs.

Community
Intermediate
ChiejiChieji

ui-ux-pro-max

Generate design-system-ready plans from styles, palettes, typography, and UX guidelines.

Community
Advanced