before-frontend-dev

Provides frontend development guidelines for component, hooks, state management, and type-safety tasks before coding.

Updated Mar 3, 2026

Search Tags:#workflow #frontend #hooks #guidelines #state-management #coding-standards #component-guidelines

Ready to run

npx skills add https://github.com/yanzhangshuai/wen-yuan --skill before-frontend-dev-yanzhangshuai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: before-frontend-dev
Source: https://github.com/yanzhangshuai/wen-yuan/tree/main/.agents/skills/before-frontend-dev
Command: npx skills add https://github.com/yanzhangshuai/wen-yuan --skill before-frontend-dev-yanzhangshuai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides frontend development guidelines to ensure consistency, reduce rework, and accelerate onboarding by starting every task with a clear reference.

Core Features & Use Cases

Centralized guidelines for frontend work (components, hooks, state-management, and type-safety) to guide tasks.
Quick path to relevant guidelines based on task type and a real-world example of starting a new frontend feature.
Mandatory upfront planning step to ensure coding standards are understood before implementation.

Quick Start

Read the frontend guidelines index and review the relevant component or hooks guidance before coding.

Frequently Asked Questions about before-frontend-dev

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

FAQPage Schema

What frontend guidelines should I review before coding a new component?▼

You should review centralized frontend guidelines covering component-driven work, hooks, state management, and type-safety before coding. This ensures consistency, reduces rework, and accelerates onboarding by starting every task with a clear reference.

How do I enforce coding standards before starting a frontend task?▼

You can enforce coding standards by applying a mandatory upfront planning step before implementation. This structured workflow requires you to read the frontend guidelines index and review relevant hooks or component guidance to ensure standards are understood.

What is the best way to structure a workflow for hooks and state management tasks?▼

The best way to structure a workflow for hooks and state management tasks is to use a centralized guidelines index. This provides a quick path to relevant guidance based on task type, ensuring type-safety and coding standards are met before implementation.

Does this workflow apply to component-driven work across different projects?▼

Yes, this workflow applies to component-driven work, hooks, state management, and type-safety tasks across projects. It provides centralized guidelines to guide tasks and ensure consistency regardless of the specific project context.

How do I quickly find relevant guidelines for a specific frontend feature?▼

You can quickly find relevant guidelines by using a quick path based on task type. The workflow includes a real-world example of starting a new frontend feature, helping you navigate the guidelines index to find actionable instructions.