一键在 Manus 中运行任何 Skill

frontend-coding

星标0

分支0

更新时间2026年4月5日 21:11

Use this skill when building frontend applications with React, Tailwind CSS, and React Testing Library. Covers React component patterns, responsive design, error handling with ErrorBoundary and useErrorHandler, Tailwind breakpoints, and file naming conventions. Use with typescript-coding skill for TypeScript fundamentals.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

imarios

imarios/open-vibes

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

Frontend Development Guidelines

Depends on typescript-coding for TypeScript fundamentals: pnpm, ESM, strict tsconfig, Prettier, ESLint, Vitest setup. This skill covers React-specific patterns only.

Golden Rules

Functional components only — No class components. Use hooks for state, effects, and context. The only exception is ErrorBoundary (React requires a class for componentDidCatch).
Early returns for state — Check loading, error, and empty states at the top of the render. Don't nest the happy path inside conditionals.
Co-locate related files — Keep component, test, and styles together. Use the project structure in project-setup.md as the baseline.
Tailwind over custom CSS — Use utility classes. Extract repeated patterns into components, not CSS abstractions.
Test behavior, not implementation — Use React Testing Library. Query by role and text, not by test ID or component internals.

Reference Routing Table

Reference	Read when you need to…
`project-setup.md`	Set up a React project — component patterns, file naming (.tsx/.ts, PascalCase), project structure, path aliases, Tailwind setup, React Testing Library patterns
`responsive-design.md`	Implement responsive layouts — Tailwind breakpoints, table and data display patterns, multi-screen testing
`error-handling.md`	Implement error handling — useErrorHandler hook, ErrorBoundary, runSafe pattern, logger utility, error classification

同仓库更多 Skills

同仓库

pyspark-coding

imarios/open-vibes

Use this skill when writing PySpark code. Provides PySpark best practices for manageability, testability, and performance including DataFrame patterns, caching strategies, testing approaches, and deployment configurations.

2026-04-230

rest-api

imarios/open-vibes

Use this skill when designing REST APIs. Provides REST API design patterns including URL structure, multi-tenancy, request/response formats, HTTP methods, authorization, and testing requirements.

2026-04-230

splunk-skill

imarios/open-vibes

Use this skill when working with Splunk queries, Search Processing Language (SPL), building Splunk searches, creating dashboards, or analyzing log data. This skill provides comprehensive reference material for SPL commands, eval functions, stats functions, regex patterns, and query optimization techniques.

2026-04-210

docker-dev

imarios/open-vibes

Use this skill when setting up Docker and Docker Compose for local development. Provides development-specific patterns for Dockerfiles and Docker Compose including live reload, volume mounting, and rapid iteration workflows.

2026-04-210

fastapi-coding

imarios/open-vibes

Use this skill when building FastAPI applications. Provides FastAPI-specific best practices including project structure, routing with Pydantic models, async database patterns, dependency injection, security, and testing.

2026-04-210

kubernetes

imarios/open-vibes

Use this skill when working with Kubernetes — writing manifests, managing clusters, debugging workloads, setting up observability, or deploying to EKS. Covers local dev, Helm, kubectl, k9s, Kustomize, OpenTelemetry, Grafana stack, and CI/CD with GitHub Actions.

2026-04-210

name	frontend-coding
description	Use this skill when building frontend applications with React, Tailwind CSS, and React Testing Library. Covers React component patterns, responsive design, error handling with ErrorBoundary and useErrorHandler, Tailwind breakpoints, and file naming conventions. Use with typescript-coding skill for TypeScript fundamentals.
version	1.1.0
dependencies	["typescript-coding"]

Frontend Development Guidelines

Depends on typescript-coding for TypeScript fundamentals: pnpm, ESM, strict tsconfig, Prettier, ESLint, Vitest setup. This skill covers React-specific patterns only.

Golden Rules

Functional components only — No class components. Use hooks for state, effects, and context. The only exception is ErrorBoundary (React requires a class for componentDidCatch).
Early returns for state — Check loading, error, and empty states at the top of the render. Don't nest the happy path inside conditionals.
Co-locate related files — Keep component, test, and styles together. Use the project structure in project-setup.md as the baseline.
Tailwind over custom CSS — Use utility classes. Extract repeated patterns into components, not CSS abstractions.
Test behavior, not implementation — Use React Testing Library. Query by role and text, not by test ID or component internals.

Reference Routing Table

Reference	Read when you need to…
`project-setup.md`	Set up a React project — component patterns, file naming (.tsx/.ts, PascalCase), project structure, path aliases, Tailwind setup, React Testing Library patterns
`responsive-design.md`	Implement responsive layouts — Tailwind breakpoints, table and data display patterns, multi-screen testing
`error-handling.md`	Implement error handling — useErrorHandler hook, ErrorBoundary, runSafe pattern, logger utility, error classification