skills.rest
dmae97
dmae97COMMUNITY
Explore all skills by this author →
GitHub

omk-frontend-implementation

Implement frontend UI components from DESIGN.md with existing design tokens.

130|14|Updated Apr 30, 2026
Search Tags:#accessibility#frontend#responsive design#implementation#design system#ui components
One-click install
npx skills add https://github.com/dmae97/oh-my-kimi --skill omk-frontend-implementation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: omk-frontend-implementation
Source: https://github.com/dmae97/oh-my-kimi/tree/main/templates/skills/agents/omk-frontend-implementation
Command: npx skills add https://github.com/dmae97/oh-my-kimi --skill omk-frontend-implementation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams turn UI requirements from design documents into consistent, accessible frontend components without breaking the existing component system.

Core Features & Use Cases

  • Design-to-code implementation: Translates DESIGN.md, mockups, or screenshots into UI code while following the established component patterns.
  • System-compliant styling: Enforces reuse of existing components and design tokens rather than introducing arbitrary colors or spacing.
  • Accessibility and quality gates: Checks responsive behavior and basic accessibility, then requires lint, typecheck, and build validation before marking work complete.

Use case: You have a new page layout and a set of components specified in DESIGN.md; this skill helps implement the frontend UI to match the design while keeping styling, responsiveness, and accessibility consistent.

Quick Start

Implement the UI components described in DESIGN.md for this feature and ensure they reuse the existing component system and pass lint, typecheck, and build.

Frequently Asked Questions about omk-frontend-implementation

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

FAQPage Schema
How do I implement UI components from a design document without breaking existing design tokens?▼

Translating DESIGN.md into frontend code requires reusing existing components and design tokens rather than inventing arbitrary styling values, ensuring the new UI matches specifications while maintaining design system consistency.

How do I ensure responsive web interfaces meet accessibility standards when building from mockups?▼

Ensuring accessibility when building from mockups requires validating responsive behavior across breakpoints and performing basic a11y checks during implementation before marking the frontend components complete.

What is the best way to turn screenshots into accessible frontend components?▼

Turning screenshots into accessible frontend components involves matching the visual layout to code while enforcing system-compliant styling and running lint, typecheck, and build validations to guarantee quality.

Can I use existing design system components for new page layouts without introducing arbitrary styling?▼

Using existing design system components for new page layouts is supported by enforcing strict token reuse, validating responsiveness, and running lint and typecheck to prevent introducing arbitrary colors or spacing.

Does frontend implementation from DESIGN.md require running lint, typecheck, and build validation?▼

Frontend implementation from DESIGN.md requires running lint, typecheck, and build validation as quality gates to ensure UI components function correctly and maintain accessibility before marking the work complete.

Why does my new frontend UI fail typecheck when built from a mockup?▼

Your frontend UI might fail typecheck if the implementation introduces arbitrary styling values or deviates from established component patterns instead of properly reusing existing design tokens and component structures.

Related Skills

Explore More Design & Creative Skills→
dmae97dmae97
130

omk-flow-design-to-code

Convert DESIGN.md and screenshots into frontend code aligned with existing components.

Community
Intermediate
lyzno1lyzno1
1

frontend-design

Create responsive, accessible frontend interfaces with HTML, CSS, and JavaScript.

Community
Basic
huangjunsen0406huangjunsen0406
77

trellis-check

Run linting, type-checking, and cross-layer data flow analysis before code commits.

Community
Advanced
nkabbarankabbara

markup-from-image

Convert UI images into semantic HTML or JSX markup.

Community
Advanced