skills.rest
hidonguyen
hidonguyenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ck:frontend-design

Convert screenshots and videos into responsive React and Tailwind components.

Updated Apr 2, 2026
Search Tags:#design#frontend#replication#animation#ui-ux#threejs#asset-generation
One-click install
npx skills add https://github.com/hidonguyen/trade-ops --skill ck-frontend-design-hidonguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:frontend-design
Source: https://github.com/hidonguyen/trade-ops/tree/main/.opencode/skills/frontend-design
Command: npx skills add https://github.com/hidonguyen/trade-ops --skill ck-frontend-design-hidonguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill removes generic, cookie-cutter frontend outputs by turning screenshots, videos, design briefs, and 3D requests into production-ready, visually distinct frontend implementations. It ensures designs are implemented with precise typography, color palettes, spatial composition, motion, accessibility checks, and performance guardrails so the final UI feels intentional and polished.

Core Features & Use Cases

  • Pixel-accurate replication: Convert screenshots and videos into responsive React + Tailwind components that match fonts, spacing, colors, and effects.
  • 3D & immersive workflows: Build Three.js scenes, shaders, and WebGL integrations for interactive, award-quality experiences.
  • Asset generation & analysis: Integrate multimodal asset creation and visual analysis to extract color palettes, verify quality, and iterate on imagery.
  • Design governance: Enforce anti-slop rules, design dials, motion and performance guardrails, and redesign audit checklists for consistent, high-end output. Use case: transform a landing page screenshot into a production-ready hero section with documented design tokens, optimized assets, and staged animations.

Quick Start

Use ck:frontend-design to convert a provided screenshot into a responsive React + Tailwind component with exact typography, color tokens, spacing, and animations ready for integration.

Frequently Asked Questions about ck:frontend-design

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

FAQPage Schema
How do I convert a screenshot into a responsive React component with exact typography and colors?▼

To convert a screenshot into a responsive React component, the Skill applies pixel-accurate replication to match exact fonts, spacing, color palettes, and effects using React and Tailwind. It outputs production-ready UI components with documented design tokens.

Can I build Three.js WebGL scenes and shaders for interactive 3D web experiences?▼

Yes, you can build Three.js scenes and WebGL integrations for immersive 3D web experiences. The Skill facilitates 3D workflows by generating interactive shaders and award-quality WebGL scenes suitable for production integration.

What is the best way to extract a color palette and verify visual quality from a design asset?▼

The best way to extract color palettes and verify visual quality is through multimodal asset generation and visual analysis. The Skill analyzes provided imagery to extract exact color tokens, iterate on assets, and enforce quality guardrails.

Does this approach work for redesign audits and enforcing design governance on landing pages?▼

Yes, this approach works for redesign audits by enforcing design governance on landing pages. The Skill applies anti-slop rules, motion specs, accessibility checks, and performance guardrails to ensure high-end, consistent frontend output.

How do I generate staged animations and design tokens for a web hero section?▼

To generate staged animations and design tokens for a web hero section, the Skill transforms design briefs and screenshots into production-ready implementations. It documents spatial composition, motion specs, and typography for immediate integration.

Related Skills

Explore More Design & Creative Skills→
TommyBezTommyBez

frontend-design

Generate distinctive frontend interfaces with creative typography, color, and motion.

Community
Advanced
alanzoppaalanzoppa
1

threejs

Create and optimize three.js scenes with materials, lighting, and animations.

Community
Intermediate
sanky369sanky369
29

creative-strategist

Define brand visual direction and generate mood boards and style guides.

Community
Advanced
GreenSheep01201GreenSheep01201
1.3k

design-taste-frontend

Enforce UI design rules and architecture in React/Next.js projects.

Community
Advanced