before-frontend-dev

Review frontend guidelines before implementing component, hook, state, or type-safety changes.

2|Updated Jan 30, 2026
One-click install
npx skills add https://github.com/LinXueyuanStdio/viben --skill before-frontend-dev-linxueyuanstdio
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: before-frontend-dev
Source: https://github.com/LinXueyuanStdio/viben/tree/main/packages/core/templates/codex/skills/before-frontend-dev
Command: npx skills add https://github.com/LinXueyuanStdio/viben --skill before-frontend-dev-linxueyuanstdio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents inconsistent or incorrect frontend implementations by ensuring you understand the project’s required component, hook, state management, and type-safety standards before writing any frontend code.

Core Features & Use Cases

  • Mandatory guideline review: Forces a quick but comprehensive pass over the official frontend specs so your changes match the repo’s patterns.
  • Task-specific reading: Directs you to the right subset of docs for the work you are about to do (components, hooks, state management, or type questions).
  • Use Case: When starting a new feature in a React/TypeScript codebase, you can follow this Skill to align your implementation with established conventions instead of guessing.

Quick Start

Read the frontend guidelines under docs/specs/frontend and then review the relevant files for your specific task (component, hook, state management, or type-safety) before writing any frontend code.

Frequently Asked Questions about before-frontend-dev

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

FAQPage Schema
How do I ensure my React components and hooks follow repository standards before coding?

Reviewing frontend guidelines before coding ensures your React components and hooks match repository standards. This process enforces mandatory pre-coding documentation steps, directing you to relevant spec files for state management and type-safety to prevent inconsistent implementations.

What is the best way to start a new feature in a TypeScript frontend codebase?

Starting a new TypeScript frontend feature requires reading the main frontend spec and relevant guideline files based on your task type. This approach aligns your implementation with established repository conventions for components, hooks, state management, and type-safety.

When do I need to read frontend type-safety and state management guidelines?

You must read frontend type-safety and state management guidelines before implementing changes involving TypeScript types or state handling in ongoing tasks. This mandatory pre-coding review ensures your work matches the repository's required patterns.

Does this pre-coding guideline review apply to all frontend tasks?

This pre-coding guideline review applies to ongoing frontend tasks involving components, hooks, state management, and TypeScript type-safety changes. It requires a comprehensive pass over official specs to ensure your changes match the repository's established patterns.

Why should I review documentation before writing frontend code?

Reviewing documentation before writing frontend code prevents incorrect implementations by ensuring you understand the project's required patterns for components, hooks, state management, and type safety. This avoids inconsistent code and aligns your work with repository standards.

How to find the right frontend docs for a specific component or hook task?

To find the right frontend docs for a specific component or hook task, navigate to docs/specs/frontend and select the relevant guideline files based on your task type. This task-specific reading directs you to the correct subset of documentation needed before implementation.