skills.rest
doccker
docckerCOMMUNITY
Explore all skills by this author →
GitHub

cc-frontend-dev

Enforces Vue 3, React, and TypeScript frontend coding standards and UI style constraints.

1.0k|109|Updated Jan 4, 2026
Search Tags:#coding conventions#typeScript#vue 3#ant design#reAct#frontend standards#Element Plus
One-click install
npx skills add https://github.com/doccker/cc-use-exp --skill cc-frontend-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cc-frontend-dev
Source: https://github.com/doccker/cc-use-exp/tree/main/.codex/skills/cc-frontend-dev
Command: npx skills add https://github.com/doccker/cc-use-exp --skill cc-frontend-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

AI-generated frontend code often drifts into inconsistent patterns: flashy AI-style UI, missing loading/error states, untyped API responses, duplicated type definitions, and subtle React/antd bugs like controlled-vs-uncontrolled misuse or double polling. This Skill encodes a complete frontend development rulebook so generated Vue 3 and React code follows consistent, production-safe conventions.

Core Features & Use Cases

  • UI Style Constraints: Bans neon gradients, glassmorphism, and emoji in UI copy; defaults to enterprise admin styling with component library themes (Element Plus / Ant Design).
  • Vue 3 + TypeScript Standards: Composition API with <script setup>, Pinia stores, naming conventions, directory structure, and typed API calls with generics instead of as any.
  • Interaction State Handling: Mandates loading, empty, error, disabled, and submitting states, plus unified API error handling and request-body completeness checks.
  • React/antd Pitfall Guides: Covers controlled vs uncontrolled props, Tree defaultExpandAll resets, dual polling conflicts, revision-counter cross-component sync, and async task patterns.
  • Use Case: When asking an AI to build an order management page, the Skill ensures the form submits every UI field (including payMethod), handles non-200 API responses with user-facing errors, and uses defaultPageSize instead of a broken controlled pagination.

Quick Start

Ask the AI to create a Vue 3 user list page with search, pagination, and proper loading and error states following the frontend development standards.

Frequently Asked Questions about cc-frontend-dev

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

FAQPage Schema
How do I structure a Vue 3 component with TypeScript and script setup?▼

Use Composition API with `<script setup lang="ts">`, define props and emits with TypeScript types via `defineProps` and `defineEmits`, and organize code in order: imports, props/emits, stores, reactive state, computed, lifecycle hooks, then methods.

What is the difference between controlled and uncontrolled components in Ant Design?▼

Controlled components need both a value prop and an onChange handler, while uncontrolled ones use `defaultXxx` props like `defaultPageSize`. Passing only a value without a handler, such as `pagination={{ pageSize: 20 }}`, makes user interactions silently fail.

How should frontend API errors be handled in Vue or React?▼

Never silently ignore non-success responses. Check the response code and show a unified error message for failures, and wrap requests in try/catch to handle network exceptions so users always get feedback.

Why does my antd Tree reset to fully expanded after editing data?▼

`defaultExpandAll` is an uncontrolled default that resets on every re-render when state updates. Switch to controlled `expandedKeys` with `onExpand`, and only populate the keys once on initial mount using a ref flag.

How do I avoid duplicate polling timers in React useEffect?▼

Keep only one polling mechanism per data source: do an initial fetch in a mount effect, then let a status-dependent effect own a single `setInterval` with proper cleanup. Never combine recursive `setTimeout` polling with a separate `setInterval` effect.

When should I use dayjs endOf month for date calculations?▼

Only use `endOf('month')` when the requirement explicitly asks for month-end dates. For general "N months later" calculations, use `dayjs().add(N, 'month')` which preserves the day of month, and avoid manual `setMonth()` manipulation.

Related Skills

Explore More Software Engineering Skills→
patricio0312revpatricio0312rev
5

api-contract-normalizer

Normalize RESTful API responses with standard envelopes, errors, and pagination.

Community
Advanced
nhouseholdernhouseholder

deploy

Automate Cloudflare Pages and Workers deployment pipelines with linting, testing, and rollback.

Community
Advanced
sarimofficialsarimofficial

errors-confirmations

Implement structured error responses and confirmation messages across backend APIs and frontend interfaces.

Community
Advanced
PatternsDevPatternsDev
235

server-side-rendering

Render React pages on the server with Next.js data fetching.

Official
Advanced