Creator · iflytek
Last updated · Sep 1, 2026
Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types.
Creator · iflytek
Last updated · Sep 1, 2026
Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types.
Creator · iflytek
Last updated · Sep 1, 2026
Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types.
Creator · iflytek
Last updated · Sep 1, 2026
Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types.
Sandbox only
Install targets
Codex install prompt
Install the "frontend-conventions" agent skill from https://github.com/iflytek/skillhub/tree/main/.agents/skills/frontend-conventions. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"iflytek-frontend-conventions","task":"Install frontend-conventions","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Code review, repo analysis, testing, CI, GitHub, DevOps, and developer workflow skills.
Scenario
Testing and QA
I need my agent to test a web app, reproduce bugs, and verify fixes.
Agent fit
Claude Code + Browser agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add iflytek/skillhub --skill frontend-conventions
Maintenance
fresh
3d since push
Risk
Needs review
Dependency or permission surface needs review
GitHub quality
4.9K
84/100 Quality · 76/100 Trust
Coverage tags
Review notes
Dependency or permission surface needs review · Permission surface may require sandboxing
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
StrongSolid option that is likely worth shortlisting for production workflows.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
4.9K GitHub stars
Repo activity
4.9K stars, 821 forks
Maintenance
3d since push
License
Apache-2.0
Install
npx skills add iflytek/skillhub --skill frontend-conventions
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add iflytek/skillhub --skill frontend-conventionsDo not use when
Alternative
174.2K Stars
npx skills add anthropics/skills --skill frontend-design
Alternative
84.4K Stars
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
Alternative
174.2K Stars
npx skills add anthropics/skills --skill canvas-design
Alternative
174.2K Stars
npx skills add anthropics/skills --skill brand-guidelines
Agent safety v2
Sparse or mixed signals. Useful for discovery, but not for autonomous installation.
Test manually in an isolated workspace and compare against safer alternatives.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill may drive a browser or interact with web pages.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
medium
Skill may read or write project files, documents, generated artifacts, or local workspace state.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20frontend-conventions%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20frontend-conventions%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/iflytek-frontend-conventions/install
Agent should check
Copy prompt
Task: Use frontend-conventions in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20frontend-conventions%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/iflytek-frontend-conventions/install
Install command: npx skills add iflytek/skillhub --skill frontend-conventions
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/iflytek-frontend-conventions/install
LLM text format
/api/skills/iflytek-frontend-conventions/install?format=text
Find alternatives
/api/skills/search?q=frontend-conventions&limit=3
Agent prompt
Use frontend-conventions for this task. Review https://www.openagentskill.com/api/skills/iflytek-frontend-conventions/install, then install with: npx skills add iflytek/skillhub --skill frontend-conventionsRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/iflytek-frontend-conventions
LLM text
/api/registry/manifest/iflytek-frontend-conventions?format=text
Install alias
/api/registry/install/iflytek-frontend-conventions
Recommend
/api/registry/recommend?task=Use%20frontend-conventions%20in%20an%20agent%20workflow&limit=3
Agent fit
Browser automation
Use-case tags
Platforms
Claude Code, Browser agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Use this as a leading candidate, then validate the README and install path in your own agent stack.
Role in stack
Primary pick
Primary fit
Browser automation
Trust label
Production-ready
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
PASS4.9K GitHub stars
Stars/forks activity
PASS4.9K stars, 821 forks; issue activity unavailable in current metadata
Recent maintenance
PASS3d since push
License clarity
PASSApache-2.0
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Solid option that is likely worth shortlisting for production workflows.
Workflow fit
Operate web apps
I need my agent to control a browser, fill forms, and verify web app workflows.
Verify behavior
I need my agent to test a web app, reproduce bugs, and verify fixes.
Build and ship code
I need a coding agent that can understand a repository, edit code, and review pull requests.
Workflow fit
Operate and verify web apps
A workflow for agents that navigate products, fill forms, take screenshots, and verify real user flows across web applications.
Design, build, test, and ship interfaces
A practical workflow for agents that turn product briefs or Figma designs into polished frontend code, review the result, test it in a browser, and prepare a safe deployment.
Inspect, patch, and verify code
A workflow for software agents that inspect repositories, review pull requests, generate tests, and turn findings into shippable patches.
Alternative shortlist
Similar skills that may fit this task.
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
Apply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.
--- name: frontend-conventions description: Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types. license: Apache-2.0 ---
# Frontend Conventions Skill
## Trigger
Use this skill when: - Adding or modifying React/TypeScript frontend code - Creating new pages, features, entities, or shared components - Changing API client calls or data fetching patterns
## Rules
### Feature-Sliced Design
Place code at the lowest appropriate layer:
| Layer | Path | Purpose | |-------|------|---------| | Pages | `web/src/pages/` | Route-level page components | | Features | `web/src/features/` | Business features (search, upload, review, etc.) | | Entities | `web/src/entities/` | Domain entity display logic (skill, user, namespace) | | Shared | `web/src/shared/` | Reusable UI components, hooks, utilities |
Current features: - `admin` — Admin panel (user management, labels, search) - `auth` — Login, OAuth flows, device auth - `governance` — Skill governance actions (hide, yank, archive) - `namespace` — Namespace management (members, settings) - `notification` — User notifications and inbox - `promotion` — Skill promotion between scopes - `publish` — Skill upload/publish UI - `report` — Skill reporting - `review` — Review workflow UI - `search` — Skill search and filtering - `security-audit` — Security audit viewer - `skill` — Skill detail, listing, cards - `social` — Stars, ratings, subscriptions - `token` — API token management
### Data Fetching
- **Always use TanStack Query** (`@tanstack/react-query`) for server state. - **Never use `useEffect`** for data fetching. - Use `openapi-fetch` client with generated types from `web/src/api/generated/schema.d.ts`. - Never use `any` types.
### State Management
- **TanStack Query** for server state (API data, caching, invalidation, optimistic updates) - **Zustand** for local/UI state (theme, sidebar, modals, form state)
### Component Composition
- **Radix UI** primitives: `@radix-ui/react-dropdown-menu`, `@radix-ui/react-select` - **class-variance-authority** (cva) for component variants - **clsx** + **tailwind-merge** for class merging - **`cn()` utility**: `web/src/shared/lib/utils.ts` - **shadcn/ui is NOT used** as a library
### API Type Generation
When backend OpenAPI contracts change:
```bash make generate-api ```
This runs `openapi-typescript http://localhost:8080/v3/api-docs -o src/api/generated/schema.d.ts`.
Commit the updated `web/src/api/generated/schema.d.ts` with the PR.
To verify the generated file is not stale:
```bash ./scripts/check-openapi-generated.sh ```
### Styling
- **Tailwind CSS** for all styling - **`cn()` utility** for conditional class merging - Follow existing component patterns in `web/src/shared/components/`
### Internationalization
- **i18next** + **react-i18next** for translations - All user-facing text must be translatable - Translation keys in `web/src/i18n/`
### Build & Development
```bash make dev-web # Start Vite dev server (HMR enabled) make build-frontend # Production build make typecheck-web # TypeScript type check (tsc --noEmit) make lint-web # ESLint check make test-frontend # Vitest unit tests make test-e2e-frontend # Playwright E2E tests make test-e2e-smoke-frontend # Playwright smoke tests ```
Vite HMR is enabled by default — save a file and the browser updates instantly.
### Frontend Dependencies
Key dependencies (from `web/package.json`): - `react` 19, `react-dom` 19 - `@tanstack/react-query` 5 - `@tanstack/react-router` 1 - `@radix-ui/react-dropdown-menu`, `@radix-ui/react-select` - `class-variance-authority`, `clsx`, `tailwind-merge` - `openapi-fetch` 0.13 - `i18next`, `react-i18next` - `zustand` 5 - `react-markdown`, `rehype-highlight`, `rehype-sanitize` - `lucide-react` (icons) - `sonner` (toasts)
Build tools: Vite 6, TypeScript 5.7, Vitest 3.2, Playwright 1.58
Source provenance
Decision snapshot
4,938 GitHub stars
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for frontend-conventions, ready for a manual X post.
frontend-conventions: Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend.... 4.9K stars https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=x
Listing + install path for frontend-conventions: https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=x Install: npx skills add iflytek/skillhub --skill frontend-conventions
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to iflytek but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions/audit)
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)iflytek
@iflytek
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
Frontend Design
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
174.2K StarsTaste Skill: Anti-Slop Frontend
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
84.4K StarsCanvas Design
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
174.2K StarsAnthropic Brand Guidelines
Apply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.
174.2K StarsSandbox only
Install targets
Codex install prompt
Install the "frontend-conventions" agent skill from https://github.com/iflytek/skillhub/tree/main/.agents/skills/frontend-conventions. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"iflytek-frontend-conventions","task":"Install frontend-conventions","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Code review, repo analysis, testing, CI, GitHub, DevOps, and developer workflow skills.
Scenario
Testing and QA
I need my agent to test a web app, reproduce bugs, and verify fixes.
Agent fit
Claude Code + Browser agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add iflytek/skillhub --skill frontend-conventions
Maintenance
fresh
3d since push
Risk
Needs review
Dependency or permission surface needs review
GitHub quality
4.9K
84/100 Quality · 76/100 Trust
Coverage tags
Review notes
Dependency or permission surface needs review · Permission surface may require sandboxing
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
StrongSolid option that is likely worth shortlisting for production workflows.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
4.9K GitHub stars
Repo activity
4.9K stars, 821 forks
Maintenance
3d since push
License
Apache-2.0
Install
npx skills add iflytek/skillhub --skill frontend-conventions
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add iflytek/skillhub --skill frontend-conventionsDo not use when
Alternative
174.2K Stars
npx skills add anthropics/skills --skill frontend-design
Alternative
84.4K Stars
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
Alternative
174.2K Stars
npx skills add anthropics/skills --skill canvas-design
Alternative
174.2K Stars
npx skills add anthropics/skills --skill brand-guidelines
Agent safety v2
Sparse or mixed signals. Useful for discovery, but not for autonomous installation.
Test manually in an isolated workspace and compare against safer alternatives.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill may drive a browser or interact with web pages.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
medium
Skill may read or write project files, documents, generated artifacts, or local workspace state.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20frontend-conventions%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20frontend-conventions%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/iflytek-frontend-conventions/install
Agent should check
Copy prompt
Task: Use frontend-conventions in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20frontend-conventions%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/iflytek-frontend-conventions/install
Install command: npx skills add iflytek/skillhub --skill frontend-conventions
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/iflytek-frontend-conventions/install
LLM text format
/api/skills/iflytek-frontend-conventions/install?format=text
Find alternatives
/api/skills/search?q=frontend-conventions&limit=3
Agent prompt
Use frontend-conventions for this task. Review https://www.openagentskill.com/api/skills/iflytek-frontend-conventions/install, then install with: npx skills add iflytek/skillhub --skill frontend-conventionsRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/iflytek-frontend-conventions
LLM text
/api/registry/manifest/iflytek-frontend-conventions?format=text
Install alias
/api/registry/install/iflytek-frontend-conventions
Recommend
/api/registry/recommend?task=Use%20frontend-conventions%20in%20an%20agent%20workflow&limit=3
Agent fit
Browser automation
Use-case tags
Platforms
Claude Code, Browser agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Use this as a leading candidate, then validate the README and install path in your own agent stack.
Role in stack
Primary pick
Primary fit
Browser automation
Trust label
Production-ready
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
PASS4.9K GitHub stars
Stars/forks activity
PASS4.9K stars, 821 forks; issue activity unavailable in current metadata
Recent maintenance
PASS3d since push
License clarity
PASSApache-2.0
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Solid option that is likely worth shortlisting for production workflows.
Workflow fit
Operate web apps
I need my agent to control a browser, fill forms, and verify web app workflows.
Verify behavior
I need my agent to test a web app, reproduce bugs, and verify fixes.
Build and ship code
I need a coding agent that can understand a repository, edit code, and review pull requests.
Workflow fit
Operate and verify web apps
A workflow for agents that navigate products, fill forms, take screenshots, and verify real user flows across web applications.
Design, build, test, and ship interfaces
A practical workflow for agents that turn product briefs or Figma designs into polished frontend code, review the result, test it in a browser, and prepare a safe deployment.
Inspect, patch, and verify code
A workflow for software agents that inspect repositories, review pull requests, generate tests, and turn findings into shippable patches.
Alternative shortlist
Similar skills that may fit this task.
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
Apply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.
--- name: frontend-conventions description: Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types. license: Apache-2.0 ---
# Frontend Conventions Skill
## Trigger
Use this skill when: - Adding or modifying React/TypeScript frontend code - Creating new pages, features, entities, or shared components - Changing API client calls or data fetching patterns
## Rules
### Feature-Sliced Design
Place code at the lowest appropriate layer:
| Layer | Path | Purpose | |-------|------|---------| | Pages | `web/src/pages/` | Route-level page components | | Features | `web/src/features/` | Business features (search, upload, review, etc.) | | Entities | `web/src/entities/` | Domain entity display logic (skill, user, namespace) | | Shared | `web/src/shared/` | Reusable UI components, hooks, utilities |
Current features: - `admin` — Admin panel (user management, labels, search) - `auth` — Login, OAuth flows, device auth - `governance` — Skill governance actions (hide, yank, archive) - `namespace` — Namespace management (members, settings) - `notification` — User notifications and inbox - `promotion` — Skill promotion between scopes - `publish` — Skill upload/publish UI - `report` — Skill reporting - `review` — Review workflow UI - `search` — Skill search and filtering - `security-audit` — Security audit viewer - `skill` — Skill detail, listing, cards - `social` — Stars, ratings, subscriptions - `token` — API token management
### Data Fetching
- **Always use TanStack Query** (`@tanstack/react-query`) for server state. - **Never use `useEffect`** for data fetching. - Use `openapi-fetch` client with generated types from `web/src/api/generated/schema.d.ts`. - Never use `any` types.
### State Management
- **TanStack Query** for server state (API data, caching, invalidation, optimistic updates) - **Zustand** for local/UI state (theme, sidebar, modals, form state)
### Component Composition
- **Radix UI** primitives: `@radix-ui/react-dropdown-menu`, `@radix-ui/react-select` - **class-variance-authority** (cva) for component variants - **clsx** + **tailwind-merge** for class merging - **`cn()` utility**: `web/src/shared/lib/utils.ts` - **shadcn/ui is NOT used** as a library
### API Type Generation
When backend OpenAPI contracts change:
```bash make generate-api ```
This runs `openapi-typescript http://localhost:8080/v3/api-docs -o src/api/generated/schema.d.ts`.
Commit the updated `web/src/api/generated/schema.d.ts` with the PR.
To verify the generated file is not stale:
```bash ./scripts/check-openapi-generated.sh ```
### Styling
- **Tailwind CSS** for all styling - **`cn()` utility** for conditional class merging - Follow existing component patterns in `web/src/shared/components/`
### Internationalization
- **i18next** + **react-i18next** for translations - All user-facing text must be translatable - Translation keys in `web/src/i18n/`
### Build & Development
```bash make dev-web # Start Vite dev server (HMR enabled) make build-frontend # Production build make typecheck-web # TypeScript type check (tsc --noEmit) make lint-web # ESLint check make test-frontend # Vitest unit tests make test-e2e-frontend # Playwright E2E tests make test-e2e-smoke-frontend # Playwright smoke tests ```
Vite HMR is enabled by default — save a file and the browser updates instantly.
### Frontend Dependencies
Key dependencies (from `web/package.json`): - `react` 19, `react-dom` 19 - `@tanstack/react-query` 5 - `@tanstack/react-router` 1 - `@radix-ui/react-dropdown-menu`, `@radix-ui/react-select` - `class-variance-authority`, `clsx`, `tailwind-merge` - `openapi-fetch` 0.13 - `i18next`, `react-i18next` - `zustand` 5 - `react-markdown`, `rehype-highlight`, `rehype-sanitize` - `lucide-react` (icons) - `sonner` (toasts)
Build tools: Vite 6, TypeScript 5.7, Vitest 3.2, Playwright 1.58
Source provenance
Decision snapshot
4,938 GitHub stars
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for frontend-conventions, ready for a manual X post.
frontend-conventions: Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend.... 4.9K stars https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=x
Listing + install path for frontend-conventions: https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=x Install: npx skills add iflytek/skillhub --skill frontend-conventions
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to iflytek but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions/audit)
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)iflytek
@iflytek
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
Frontend Design
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
174.2K StarsTaste Skill: Anti-Slop Frontend
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
84.4K StarsCanvas Design
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
174.2K StarsAnthropic Brand Guidelines
Apply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.
174.2K StarsSandbox only
Install targets
Codex install prompt
Install the "frontend-conventions" agent skill from https://github.com/iflytek/skillhub/tree/main/.agents/skills/frontend-conventions. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"iflytek-frontend-conventions","task":"Install frontend-conventions","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Code review, repo analysis, testing, CI, GitHub, DevOps, and developer workflow skills.
Scenario
Testing and QA
I need my agent to test a web app, reproduce bugs, and verify fixes.
Agent fit
Claude Code + Browser agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add iflytek/skillhub --skill frontend-conventions
Maintenance
fresh
3d since push
Risk
Needs review
Dependency or permission surface needs review
GitHub quality
4.9K
84/100 Quality · 76/100 Trust
Coverage tags
Review notes
Dependency or permission surface needs review · Permission surface may require sandboxing
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
StrongSolid option that is likely worth shortlisting for production workflows.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
4.9K GitHub stars
Repo activity
4.9K stars, 821 forks
Maintenance
3d since push
License
Apache-2.0
Install
npx skills add iflytek/skillhub --skill frontend-conventions
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add iflytek/skillhub --skill frontend-conventionsDo not use when
Alternative
174.2K Stars
npx skills add anthropics/skills --skill frontend-design
Alternative
84.4K Stars
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
Alternative
174.2K Stars
npx skills add anthropics/skills --skill canvas-design
Alternative
174.2K Stars
npx skills add anthropics/skills --skill brand-guidelines
Agent safety v2
Sparse or mixed signals. Useful for discovery, but not for autonomous installation.
Test manually in an isolated workspace and compare against safer alternatives.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill may drive a browser or interact with web pages.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
medium
Skill may read or write project files, documents, generated artifacts, or local workspace state.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20frontend-conventions%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20frontend-conventions%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/iflytek-frontend-conventions/install
Agent should check
Copy prompt
Task: Use frontend-conventions in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20frontend-conventions%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/iflytek-frontend-conventions/install
Install command: npx skills add iflytek/skillhub --skill frontend-conventions
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/iflytek-frontend-conventions/install
LLM text format
/api/skills/iflytek-frontend-conventions/install?format=text
Find alternatives
/api/skills/search?q=frontend-conventions&limit=3
Agent prompt
Use frontend-conventions for this task. Review https://www.openagentskill.com/api/skills/iflytek-frontend-conventions/install, then install with: npx skills add iflytek/skillhub --skill frontend-conventionsRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/iflytek-frontend-conventions
LLM text
/api/registry/manifest/iflytek-frontend-conventions?format=text
Install alias
/api/registry/install/iflytek-frontend-conventions
Recommend
/api/registry/recommend?task=Use%20frontend-conventions%20in%20an%20agent%20workflow&limit=3
Agent fit
Browser automation
Use-case tags
Platforms
Claude Code, Browser agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Use this as a leading candidate, then validate the README and install path in your own agent stack.
Role in stack
Primary pick
Primary fit
Browser automation
Trust label
Production-ready
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
PASS4.9K GitHub stars
Stars/forks activity
PASS4.9K stars, 821 forks; issue activity unavailable in current metadata
Recent maintenance
PASS3d since push
License clarity
PASSApache-2.0
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Solid option that is likely worth shortlisting for production workflows.
Workflow fit
Operate web apps
I need my agent to control a browser, fill forms, and verify web app workflows.
Verify behavior
I need my agent to test a web app, reproduce bugs, and verify fixes.
Build and ship code
I need a coding agent that can understand a repository, edit code, and review pull requests.
Workflow fit
Operate and verify web apps
A workflow for agents that navigate products, fill forms, take screenshots, and verify real user flows across web applications.
Design, build, test, and ship interfaces
A practical workflow for agents that turn product briefs or Figma designs into polished frontend code, review the result, test it in a browser, and prepare a safe deployment.
Inspect, patch, and verify code
A workflow for software agents that inspect repositories, review pull requests, generate tests, and turn findings into shippable patches.
Alternative shortlist
Similar skills that may fit this task.
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
Apply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.
--- name: frontend-conventions description: Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types. license: Apache-2.0 ---
# Frontend Conventions Skill
## Trigger
Use this skill when: - Adding or modifying React/TypeScript frontend code - Creating new pages, features, entities, or shared components - Changing API client calls or data fetching patterns
## Rules
### Feature-Sliced Design
Place code at the lowest appropriate layer:
| Layer | Path | Purpose | |-------|------|---------| | Pages | `web/src/pages/` | Route-level page components | | Features | `web/src/features/` | Business features (search, upload, review, etc.) | | Entities | `web/src/entities/` | Domain entity display logic (skill, user, namespace) | | Shared | `web/src/shared/` | Reusable UI components, hooks, utilities |
Current features: - `admin` — Admin panel (user management, labels, search) - `auth` — Login, OAuth flows, device auth - `governance` — Skill governance actions (hide, yank, archive) - `namespace` — Namespace management (members, settings) - `notification` — User notifications and inbox - `promotion` — Skill promotion between scopes - `publish` — Skill upload/publish UI - `report` — Skill reporting - `review` — Review workflow UI - `search` — Skill search and filtering - `security-audit` — Security audit viewer - `skill` — Skill detail, listing, cards - `social` — Stars, ratings, subscriptions - `token` — API token management
### Data Fetching
- **Always use TanStack Query** (`@tanstack/react-query`) for server state. - **Never use `useEffect`** for data fetching. - Use `openapi-fetch` client with generated types from `web/src/api/generated/schema.d.ts`. - Never use `any` types.
### State Management
- **TanStack Query** for server state (API data, caching, invalidation, optimistic updates) - **Zustand** for local/UI state (theme, sidebar, modals, form state)
### Component Composition
- **Radix UI** primitives: `@radix-ui/react-dropdown-menu`, `@radix-ui/react-select` - **class-variance-authority** (cva) for component variants - **clsx** + **tailwind-merge** for class merging - **`cn()` utility**: `web/src/shared/lib/utils.ts` - **shadcn/ui is NOT used** as a library
### API Type Generation
When backend OpenAPI contracts change:
```bash make generate-api ```
This runs `openapi-typescript http://localhost:8080/v3/api-docs -o src/api/generated/schema.d.ts`.
Commit the updated `web/src/api/generated/schema.d.ts` with the PR.
To verify the generated file is not stale:
```bash ./scripts/check-openapi-generated.sh ```
### Styling
- **Tailwind CSS** for all styling - **`cn()` utility** for conditional class merging - Follow existing component patterns in `web/src/shared/components/`
### Internationalization
- **i18next** + **react-i18next** for translations - All user-facing text must be translatable - Translation keys in `web/src/i18n/`
### Build & Development
```bash make dev-web # Start Vite dev server (HMR enabled) make build-frontend # Production build make typecheck-web # TypeScript type check (tsc --noEmit) make lint-web # ESLint check make test-frontend # Vitest unit tests make test-e2e-frontend # Playwright E2E tests make test-e2e-smoke-frontend # Playwright smoke tests ```
Vite HMR is enabled by default — save a file and the browser updates instantly.
### Frontend Dependencies
Key dependencies (from `web/package.json`): - `react` 19, `react-dom` 19 - `@tanstack/react-query` 5 - `@tanstack/react-router` 1 - `@radix-ui/react-dropdown-menu`, `@radix-ui/react-select` - `class-variance-authority`, `clsx`, `tailwind-merge` - `openapi-fetch` 0.13 - `i18next`, `react-i18next` - `zustand` 5 - `react-markdown`, `rehype-highlight`, `rehype-sanitize` - `lucide-react` (icons) - `sonner` (toasts)
Build tools: Vite 6, TypeScript 5.7, Vitest 3.2, Playwright 1.58
Source provenance
Decision snapshot
4,938 GitHub stars
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for frontend-conventions, ready for a manual X post.
frontend-conventions: Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend.... 4.9K stars https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=x
Listing + install path for frontend-conventions: https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=x Install: npx skills add iflytek/skillhub --skill frontend-conventions
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to iflytek but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions/audit)
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)iflytek
@iflytek
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
Frontend Design
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
174.2K StarsTaste Skill: Anti-Slop Frontend
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
84.4K StarsCanvas Design
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
174.2K StarsAnthropic Brand Guidelines
Apply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.
174.2K StarsSandbox only
Install targets
Codex install prompt
Install the "frontend-conventions" agent skill from https://github.com/iflytek/skillhub/tree/main/.agents/skills/frontend-conventions. Read its SKILL.md or equivalent instructions first, install only the files needed for this workspace, and summarize any required setup before using it. Skill purpose: Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types. After the install attempt, report the result to https://www.openagentskill.com/api/agent/outcome with POST JSON {"event_id":"install_<unique-id>","skill_slug":"iflytek-frontend-conventions","task":"Install frontend-conventions","agent":"codex","outcome":"success","install_used":true}. Replace event_id with a unique value and outcome with success or failed. Report success only after the skill is installed and a minimal verification passes.Supply asset profile
Code review, repo analysis, testing, CI, GitHub, DevOps, and developer workflow skills.
Scenario
Testing and QA
I need my agent to test a web app, reproduce bugs, and verify fixes.
Agent fit
Claude Code + Browser agents + CLI
Codex, Claude Code, Cursor, CLI, or custom agents.
Install
Ready
npx skills add iflytek/skillhub --skill frontend-conventions
Maintenance
fresh
3d since push
Risk
Needs review
Dependency or permission surface needs review
GitHub quality
4.9K
84/100 Quality · 76/100 Trust
Coverage tags
Review notes
Dependency or permission surface needs review · Permission surface may require sandboxing
Agent adoption scorecard
These scores combine public repository metadata, OpenAgentSkill review signals, maintenance freshness, and install readiness. They are a shortlist signal, not a replacement for human review.
Quality
StrongSolid option that is likely worth shortlisting for production workflows.
Trust
Sandbox onlyUseful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
Audit
Needs reviewA machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
OpenAgentSkill Trust Score v5
Run only in a sandbox and compare close alternatives before using it for real work.
Stars
4.9K GitHub stars
Repo activity
4.9K stars, 821 forks
Maintenance
3d since push
License
Apache-2.0
Install
npx skills add iflytek/skillhub --skill frontend-conventions
Install safety
Agent-readable metadata
Use this block or the embedded JSON to decide whether an agent should install this skill, choose an alternative, or ask for human review first.
Suited tasks
Suited agents
Install decision
Trust and risk
Outcome loop
Install command
npx skills add iflytek/skillhub --skill frontend-conventionsDo not use when
Alternative
174.2K Stars
npx skills add anthropics/skills --skill frontend-design
Alternative
84.4K Stars
npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
Alternative
174.2K Stars
npx skills add anthropics/skills --skill canvas-design
Alternative
174.2K Stars
npx skills add anthropics/skills --skill brand-guidelines
Agent safety v2
Sparse or mixed signals. Useful for discovery, but not for autonomous installation.
Test manually in an isolated workspace and compare against safer alternatives.
high
Skill metadata references terminal, CLI, shell, subprocess, or command execution workflows.
medium
Skill may drive a browser or interact with web pages.
medium
Skill likely fetches remote pages, APIs, repositories, or external services.
medium
Skill may read or write project files, documents, generated artifacts, or local workspace state.
Agent resolve plan
The Resolve API returns the selected skill, alternatives, safety policy, audit notes, install target, and copy-paste prompt an agent can follow without scraping this page.
Open JSON
/api/agent/resolve?task=Use%20frontend-conventions%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Resolve text
/api/agent/resolve?task=Use%20frontend-conventions%20for%20an%20agent%20workflow&agent=codex&max_risk=medium&format=text
Install handoff
/api/skills/iflytek-frontend-conventions/install
Agent should check
Copy prompt
Task: Use frontend-conventions in this workspace.
Resolve first: https://www.openagentskill.com/api/agent/resolve?task=Use%20frontend-conventions%20for%20an%20agent%20workflow&agent=codex&max_risk=medium
Review install handoff: https://www.openagentskill.com/api/skills/iflytek-frontend-conventions/install
Install command: npx skills add iflytek/skillhub --skill frontend-conventions
Before running it, summarize audit warnings, required permissions, and the fallback skill if install is risky.Agent handoff
Use the public install endpoint to fetch the command, safety checklist, target prompts, and canonical links for this skill.
Install handoff
/api/skills/iflytek-frontend-conventions/install
LLM text format
/api/skills/iflytek-frontend-conventions/install?format=text
Find alternatives
/api/skills/search?q=frontend-conventions&limit=3
Agent prompt
Use frontend-conventions for this task. Review https://www.openagentskill.com/api/skills/iflytek-frontend-conventions/install, then install with: npx skills add iflytek/skillhub --skill frontend-conventionsRegistry metadata
This page exposes the same decision, trust, audit, use-case, and install signals through the Registry API, so agents can rank this skill without scraping the UI.
Manifest
/api/registry/manifest/iflytek-frontend-conventions
LLM text
/api/registry/manifest/iflytek-frontend-conventions?format=text
Install alias
/api/registry/install/iflytek-frontend-conventions
Recommend
/api/registry/recommend?task=Use%20frontend-conventions%20in%20an%20agent%20workflow&limit=3
Agent fit
Browser automation
Use-case tags
Platforms
Claude Code, Browser agents
Audit report
A machine-readable review of install readiness, security metadata, maintenance, and adoption risk.
Agent decision cockpit
Use this as a leading candidate, then validate the README and install path in your own agent stack.
Role in stack
Primary pick
Primary fit
Browser automation
Trust label
Production-ready
Install path
Command ready
Use when
Evidence
review first
Implementation path
Trust profile
Useful candidate with missing or mixed trust signals. Keep it in an isolated workspace until the outcome loop proves task fit.
GitHub adoption
PASS4.9K GitHub stars
Stars/forks activity
PASS4.9K stars, 821 forks; issue activity unavailable in current metadata
Recent maintenance
PASS3d since push
License clarity
PASSApache-2.0
Good signals
Review before install
Recommended action
Run only in a sandbox and compare close alternatives before using it for real work.
Quality profile
Solid option that is likely worth shortlisting for production workflows.
Workflow fit
Operate web apps
I need my agent to control a browser, fill forms, and verify web app workflows.
Verify behavior
I need my agent to test a web app, reproduce bugs, and verify fixes.
Build and ship code
I need a coding agent that can understand a repository, edit code, and review pull requests.
Workflow fit
Operate and verify web apps
A workflow for agents that navigate products, fill forms, take screenshots, and verify real user flows across web applications.
Design, build, test, and ship interfaces
A practical workflow for agents that turn product briefs or Figma designs into polished frontend code, review the result, test it in a browser, and prepare a safe deployment.
Inspect, patch, and verify code
A workflow for software agents that inspect repositories, review pull requests, generate tests, and turn findings into shippable patches.
Alternative shortlist
Similar skills that may fit this task.
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
Apply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.
--- name: frontend-conventions description: Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend. Ensures agents follow Feature-Sliced Design and use the generated OpenAPI types. license: Apache-2.0 ---
# Frontend Conventions Skill
## Trigger
Use this skill when: - Adding or modifying React/TypeScript frontend code - Creating new pages, features, entities, or shared components - Changing API client calls or data fetching patterns
## Rules
### Feature-Sliced Design
Place code at the lowest appropriate layer:
| Layer | Path | Purpose | |-------|------|---------| | Pages | `web/src/pages/` | Route-level page components | | Features | `web/src/features/` | Business features (search, upload, review, etc.) | | Entities | `web/src/entities/` | Domain entity display logic (skill, user, namespace) | | Shared | `web/src/shared/` | Reusable UI components, hooks, utilities |
Current features: - `admin` — Admin panel (user management, labels, search) - `auth` — Login, OAuth flows, device auth - `governance` — Skill governance actions (hide, yank, archive) - `namespace` — Namespace management (members, settings) - `notification` — User notifications and inbox - `promotion` — Skill promotion between scopes - `publish` — Skill upload/publish UI - `report` — Skill reporting - `review` — Review workflow UI - `search` — Skill search and filtering - `security-audit` — Security audit viewer - `skill` — Skill detail, listing, cards - `social` — Stars, ratings, subscriptions - `token` — API token management
### Data Fetching
- **Always use TanStack Query** (`@tanstack/react-query`) for server state. - **Never use `useEffect`** for data fetching. - Use `openapi-fetch` client with generated types from `web/src/api/generated/schema.d.ts`. - Never use `any` types.
### State Management
- **TanStack Query** for server state (API data, caching, invalidation, optimistic updates) - **Zustand** for local/UI state (theme, sidebar, modals, form state)
### Component Composition
- **Radix UI** primitives: `@radix-ui/react-dropdown-menu`, `@radix-ui/react-select` - **class-variance-authority** (cva) for component variants - **clsx** + **tailwind-merge** for class merging - **`cn()` utility**: `web/src/shared/lib/utils.ts` - **shadcn/ui is NOT used** as a library
### API Type Generation
When backend OpenAPI contracts change:
```bash make generate-api ```
This runs `openapi-typescript http://localhost:8080/v3/api-docs -o src/api/generated/schema.d.ts`.
Commit the updated `web/src/api/generated/schema.d.ts` with the PR.
To verify the generated file is not stale:
```bash ./scripts/check-openapi-generated.sh ```
### Styling
- **Tailwind CSS** for all styling - **`cn()` utility** for conditional class merging - Follow existing component patterns in `web/src/shared/components/`
### Internationalization
- **i18next** + **react-i18next** for translations - All user-facing text must be translatable - Translation keys in `web/src/i18n/`
### Build & Development
```bash make dev-web # Start Vite dev server (HMR enabled) make build-frontend # Production build make typecheck-web # TypeScript type check (tsc --noEmit) make lint-web # ESLint check make test-frontend # Vitest unit tests make test-e2e-frontend # Playwright E2E tests make test-e2e-smoke-frontend # Playwright smoke tests ```
Vite HMR is enabled by default — save a file and the browser updates instantly.
### Frontend Dependencies
Key dependencies (from `web/package.json`): - `react` 19, `react-dom` 19 - `@tanstack/react-query` 5 - `@tanstack/react-router` 1 - `@radix-ui/react-dropdown-menu`, `@radix-ui/react-select` - `class-variance-authority`, `clsx`, `tailwind-merge` - `openapi-fetch` 0.13 - `i18next`, `react-i18next` - `zustand` 5 - `react-markdown`, `rehype-highlight`, `rehype-sanitize` - `lucide-react` (icons) - `sonner` (toasts)
Build tools: Vite 6, TypeScript 5.7, Vitest 3.2, Playwright 1.58
Source provenance
Decision snapshot
4,938 GitHub stars
Audit
Install and adoption review
Agent-proven evidence
Outcome reports after resolve, review, install, and one narrow run.
No agent outcome data yet. The first agent run can report success, setup needs, risk blocks, failure, or not-relevant through /api/agent/outcome.
Install
Free and open source. Review the report before installing into production agents.
Growth loop
Scenario-led draft for frontend-conventions, ready for a manual X post.
frontend-conventions: Coding conventions, architecture patterns, and testing rules for the SkillHub React frontend.... 4.9K stars https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=x
Listing + install path for frontend-conventions: https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=x Install: npx skills add iflytek/skillhub --skill frontend-conventions
Listing source
This listing was indexed from public sources and is not marked official until a maintainer claim is approved.
Attribution links to the public repository or creator profile. Creators can claim the listing to update ownership signals.
Claim this skillOwner claim
This Registry indexed listing is attributed to iflytek but is not marked official yet. Claim it to add a verified owner signal and make future launch, install, and audit updates easier to trust.
Creator backlink kit
Show the canonical listing, current trust and audit signals, and real Agent-Proven evidence where developers evaluate the repository.
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions/audit)
[](https://www.openagentskill.com/skills/iflytek-frontend-conventions?ref=github&utm_source=github&utm_medium=referral&utm_campaign=creator_badge)iflytek
@iflytek
Share whether this skill looks useful for your agent workflow. Aggregated feedback improves rankings over time.
Sandbox only
Frontend Design
Guidance for distinctive, intentional UI design, typography, visual direction, and non-template-like product interfaces.
174.2K StarsTaste Skill: Anti-Slop Frontend
Design and implementation guidance for distinctive landing pages, portfolios, product demos, and purposeful redesigns.
84.4K StarsCanvas Design
Create original visual art, posters, PNG assets, and PDF documents through a clear design philosophy.
174.2K StarsAnthropic Brand Guidelines
Apply Anthropic official brand colors, typography, and visual standards to appropriate Anthropic-related artifacts.
174.2K StarsPermission surface
secrets or environment access, shell or command execution
Agent outcomes
No agent outcome data yet
Docs
Usable metadata, review docs
Risk summary
Install readiness
Permission surface
secrets or environment access, shell or command execution
Agent outcomes
No agent outcome data yet
Docs
Usable metadata, review docs
Risk summary
Install readiness
Permission surface
secrets or environment access, shell or command execution
Agent outcomes
No agent outcome data yet
Docs
Usable metadata, review docs
Risk summary
Install readiness
Permission surface
secrets or environment access, shell or command execution
Agent outcomes
No agent outcome data yet
Docs
Usable metadata, review docs
Risk summary
Install readiness