skills.rest
jamsdoescode
jamsdoescodeCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Build and polish frontend UI for websites, dashboards, and landing pages.

Updated Jul 7, 2026
Search Tags:#landing page#frontend#dashboard#web design#animation#ui design#responsive
One-click install
npx skills add https://github.com/jamsdoescode/Erik-s-Portfolio --skill frontend-design-jamsdoescode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jamsdoescode/Erik-s-Portfolio/tree/main/openclicky/AppResources/OpenClicky/OpenClickyBundledSkills/frontend-design
Command: npx skills add https://github.com/jamsdoescode/Erik-s-Portfolio --skill frontend-design-jamsdoescode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It turns vague requests for websites, dashboards, or UI improvements into working frontend code that follows deliberate design rules instead of generic AI-generated aesthetics. ## Core Features & Use Cases - UI Construction: Builds complete working interfaces for websites, web apps, dashboards, landing pages, components, and HTML prototypes while reusing the existing stack and style conventions. - Visual Polish: Improves spacing, typography, contrast, responsiveness, and layout hierarchy after the UI works. - Purposeful Motion: Adds animations and micro-interactions with correct durations, transform/opacity-based properties, and reduced-motion fallbacks. - Use Case: Ask for a responsive SaaS dashboard redesign, and it detects the project stack, rebuilds the layout with real controls, verifies narrow and desktop viewports, and points you to the preview. ## Quick Start Ask the assistant to redesign the landing page in this project with a responsive layout and subtle hover animations.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I redesign a website UI with AI?▼

Point the assistant at your project and describe the redesign goal. It detects the existing framework and style conventions, builds the smallest complete working UI, then adds polish for spacing, typography, contrast, and responsiveness before verifying the result in a preview.

How to add animations and micro-interactions to a web page?▼

Request the specific motion you want, such as hover states or page transitions. The skill animates transform and opacity with short durations (100-500ms), prefers one strong motion idea, and always preserves a non-animated path for reduced-motion users.

Does this work with existing React or other frontend frameworks?▼

Yes. The workflow starts by detecting the target project's stack and reusing its existing framework, component, style, and token conventions rather than imposing a new one, so the generated UI fits the current codebase.

When should I not use this frontend design skill?▼

Avoid it for static documents like PDFs, DOCX, spreadsheets, or Google Workspace tasks, and for clicking through an existing app's GUI. It is also unsuitable for pure codebase, PR, or CI tasks with no UI outcome.

How is the generated UI verified for responsiveness?▼

The skill runs the project build or check command when reasonable, confirms the preview URL or HTML file exists, and inspects at least one narrow and one desktop viewport using local preview tooling, browser test tools, or rendered screenshots.

Related Skills

Explore More Design & Creative Skills→
Final-Project-solicode-WebsiteeFinal-Project-solicode-Websitee

designer-ui

Convert wireframes into Atomic Design components and Tailwind/Preline HTML mockups.

Official
Advanced
shengmingzhishushengmingzhishu

integration-testing

Validates frontend-backend API contracts through joint debugging, Pact contract tests, and end-to-end integration tests.

Community
Intermediate
redpanda-dataredpanda-data
34

visual-review

Automate visual and accessibility reviews of frontend UI changes with Playwright.

Official
Advanced
nexu-ionexu-io
93.2k

figma-generate-design

Generate and update Figma design screens from code or descriptive design system specifications.

Official
Intermediate