skills.rest
yizhitangtongxue
yizhitangtongxueCOMMUNITY
Explore all skills by this author →
GitHub

check-frontend

Review recently written frontend code against project development guidelines.

Updated Mar 24, 2026
Search Tags:#type safety#code review#frontend#react#quality#guidelines#git status
One-click install
npx skills add https://github.com/yizhitangtongxue/opencode-switch --skill check-frontend-yizhitangtongxue
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: check-frontend
Source: https://github.com/yizhitangtongxue/opencode-switch/tree/main/.agents/skills/check-frontend
Command: npx skills add https://github.com/yizhitangtongxue/opencode-switch --skill check-frontend-yizhitangtongxue

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? After writing frontend code, it is easy to violate project-specific conventions for components, hooks, state management, or type safety without noticing. This Skill automates a structured self-review so guideline violations are caught and fixed before the code is committed. ## Core Features & Use Cases - Change Detection: Runs git status to identify which files were modified. - Guideline Mapping: Reads .trellis/spec/frontend/index.md and loads only the relevant guideline files (component, hook, state management, type safety, quality) based on what changed. - Violation Reporting: Reviews the code against the guidelines, reports violations, and fixes them. - Use Case: After refactoring a React component and its custom hook, invoke this Skill to verify the changes follow the project's component and hook guidelines and automatically correct any issues found. ## Quick Start Check whether the frontend code I just wrote follows the project guidelines and fix any violations.

Frequently Asked Questions about check-frontend

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

FAQPage Schema
How do I check if my frontend code follows project guidelines?▼

Run this Skill after making changes. It executes git status to find modified files, reads the relevant guideline documents under .trellis/spec/frontend, reviews your code against them, and reports or fixes any violations.

How to review React component and hook changes automatically?▼

The Skill maps your changes to the right guideline files: component changes trigger component-guidelines.md, hook changes trigger hook-guidelines.md, and state or type changes load their respective documents for a targeted review.

Does this frontend check require a specific project structure?▼

Yes, it expects guideline files to exist under .trellis/spec/frontend, including index.md plus component, hook, state-management, type-safety, and quality guideline documents. Without these files the review steps cannot be completed.

What types of frontend changes does the guideline review cover?▼

It covers component changes, custom hook changes, state management updates, and type safety modifications. The quality-guidelines.md file is consulted for any change regardless of category.

When should I not use this frontend guideline check?▼

Skip it when your changes are outside the frontend scope, such as backend or infrastructure edits, or when the project has no .trellis/spec/frontend guideline documents to review against.

Related Skills

Explore More Software Engineering Skills→
OpenAuthorityOpenAuthority
8

git_status

Report staged, unstaged, and untracked files from git status --porcelain.

Official
Intermediate
drvossdrvoss
42

code-review

Review code changes for quality, correctness, and security.

Community
Intermediate
kirvinkirvin

preflight-checks

Run project-specific linters, formatters, and type checkers on staged files.

Community
Intermediate
outcomeengineeringoutcomeengineering
1

standardizing-typescript

Enforces TypeScript code standards via strict mode, ESLint rules, and review guidelines.

Official
Intermediate