skills.rest
zts212653
zts212653COMMUNITY
Explore all skills by this author →
GitHub

console-dev

Guides frontend development through four product, design, implementation, and verification gates.

2.9k|733|Updated Mar 12, 2026
Search Tags:#verification#Frontend#console#Design system#UI states#Code review#settings migration
One-click install
npx skills add https://github.com/zts212653/clowder-ai --skill console-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: console-dev
Source: https://github.com/zts212653/clowder-ai/tree/main/cat-cafe-skills/console-dev
Command: npx skills add https://github.com/zts212653/clowder-ai --skill console-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend work often starts with components before deciding where the feature lives, which leads to bloated navigation, inconsistent styling, and untested UI states. This Skill enforces a four-gate workflow so every Console frontend change has a defined entry point, design-token compliance, size discipline, and visual proof before delivery.

Core Features & Use Cases

  • Product Gate: Classifies new capabilities into entry levels (Activity Bar, /settings, settings sub-tabs, standalone routes) and requires a state matrix covering loading, empty, error, and permission states.
  • Design-System Gate: Enforces token-first styling by reusing existing CSS variables and component primitives instead of hardcoded visual values.
  • Implementation & Verification Gates: Triggers split reviews at 200/350 lines, separates display values from submitted secrets, and demands golden-path plus non-happy-path evidence including modal and dark-mode checks.
  • Use Case: When migrating a settings section or adding a new Console page, run through the four gates to produce frontend code with documented entry rationale, state coverage, and browser-verified proof.

Quick Start

Use the console-dev skill to plan and implement a new settings page for the Console, walking through the Product, Design-System, Implementation, and Verification gates.

Frequently Asked Questions about console-dev

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

FAQPage Schema
What is a gate-driven frontend development workflow?▼

It is a process where frontend work must pass sequential checkpoints before delivery: a Product gate for entry placement, a Design-System gate for token reuse, an Implementation gate for size and secret handling, and a Verification gate for visual and behavioral evidence.

When should a frontend component be split into smaller pieces?▼

A component triggers split review at 200 lines and must be split by default at 350 lines unless a structural reason is documented. The preferred split direction is visually independent sub-components rather than extracting small utility functions.

How do I handle sensitive values in settings forms safely?▼

Keep display values and submitted payloads separate. Redacted placeholders shown in the UI must never be written back into the draft state, otherwise they overwrite the real stored secret.

When should I not use this frontend gate workflow?▼

Skip it for small style tweaks, pure backend API changes, pure computation logic, and standalone design-token definitions. It is designed for user-visible frontend capabilities that need entry, state, and visual verification decisions.

Related Skills

Explore More Software Engineering Skills→
figmafigma
1.9k

implement-design

Translate Figma designs into UI code using design tokens and existing components.

Official
Advanced
carrot-foundationcarrot-foundation
1

finish-work

Validate changes, run quality gates, commit, push, and create a pull request.

Official
Advanced
laozhong86laozhong86
1

gxpm-browser

Automate headless browser QA evidence capture with Playwright commands.

Community
Intermediate
HmbownHmbown
105

silent-image

Render static visual mockups with clear annotations for design reviews.

Community
Basic