skills.rest
efekrbas
efekrbasCOMMUNITY
Explore all skills by this author →
Website𝕏@efekrbsGitHub

ckw-design

Review React, Vue, HTML, and CSS interfaces for layout, spacing, typography, and responsiveness.

41|5|Updated Sep 30, 2025
Search Tags:#typography#design#ui#layout#frontend#usability#responsive
One-click install
npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill ckw-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ckw-design
Source: https://github.com/efekrbas/discord-hypesquad-manager/tree/main/.agents/skills/ckw-design
Command: npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill ckw-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design and refine frontend interfaces that feel cohesive, modern, and production-ready instead of generic or unfinished.

Core Features & Use Cases

  • Visual Direction: Establishes a clear design philosophy, tone, and aesthetic for web UIs.
  • Layout and Spacing Guidance: Helps improve alignment, hierarchy, responsiveness, and overall composition across components and pages.
  • Design System Support: Guides color, typography, motion, and component decisions for React, Vue, HTML, and CSS projects.
  • Usability Review: Supports practical checks for interaction quality and discoverability, not just appearance.
  • Use Case: Use this Skill when a dashboard looks crowded, a landing page feels bland, or an app needs a more refined and consistent visual language.

Quick Start

Use the ckw-design skill to review this web interface and give me a clear set of improvements for layout, spacing, typography, color, and responsiveness.

Frequently Asked Questions about ckw-design

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

FAQPage Schema
How do I improve web interface layout and spacing for React components?▼

To improve web interface layout and spacing for React components, you need clear design direction for alignment, hierarchy, and composition. This Skill reviews your frontend UI and provides specific improvements for spacing, typography, and responsiveness to produce production-ready results.

What is the best way to refine dashboard typography and color for a cohesive design?▼

The best way to refine dashboard typography and color for a cohesive design is to apply a consistent design system. This Skill guides color, typography, and component decisions to transform crowded dashboards into modern, cohesive interfaces.

Does this UI design guidance work with Vue and HTML projects?▼

Yes, this UI design guidance works with Vue and HTML projects. It applies to React, Vue, HTML, and CSS layouts, offering spatial composition checks and usability-oriented reviews to ensure cohesive, polished web interfaces across frontend frameworks.

How do I review frontend responsiveness and usability for a landing page?▼

To review frontend responsiveness and usability for a landing page, you need a usability-oriented review process. This Skill checks interaction quality, discoverability, and responsive behavior, providing actionable improvements to refine bland landing pages.

When should I use a design direction skill for frontend styling?▼

You should use a design direction skill for frontend styling when a dashboard looks crowded, a landing page feels bland, or an app needs a refined visual language. It provides system guidance to elevate generic interfaces into polished experiences.

Related Skills

Explore More Design & Creative Skills→
VoDaiLoczVoDaiLocz
24

frontend-design

Guide frontend interface creation with design guidelines for typography, color, and motion.

Community
Advanced
PouriaRouzrokhPouriaRouzrokh

frontend-design

Define and implement production-grade frontend interfaces with typography, color tokens, spacing, and accessibility.

Community
Advanced
tomasbassotomasbasso

frontend-design

Translates design briefs into production-grade frontend interfaces and components.

Community
Advanced
wpgauravwpgaurav
14

ckm:ui-styling

Generate accessible React UIs with shadcn/ui, Radix UI, and Tailwind CSS.

Community
Intermediate