Skip to content

Search skills.../

Agent Skill Search Engine

Search

Search
Categories
Occupations

About

About
Privacy
Terms

© 2026 Skills Pool. All rights reserved.

Frontend Platform | Skills Pool

Skill File

Frontend Platform

Use for any work in apps/web involving Next.js, Tailwind, shadcn/ui, Axios, TanStack Query, hooks, component structure, or review and correction UI architecture.

soymustamahti0 starsMar 16, 2026

Occupation
Categories: Full Stack

Skill Content

Use this skill for all work inside apps/web.

Defaults

Next.js App Router
TypeScript strict mode
Tailwind CSS for styling
shadcn/ui for reusable UI primitives
Axios for HTTP transport
TanStack Query for request state, caching, and mutations

UI Direction

Keep the UI minimalist and calm
Favor clarity over visual noise
Every screen must make the next action obvious
Always show loading, empty, error, and success states
Make validation issues and confidence signals easy to scan

Component Rules

Keep presentational components separate from data hooks
Feature components may compose smaller presentational subcomponents
Avoid giant page files that own all state and rendering logic
Keep view-specific formatting near the component, but keep request logic in hooks or API layers

Related Skills

Quick Install

Frontend Platform

npx skillvault add soymustamahti/soymustamahti-little-john-test-codex-skills-frontend-platform-skill-md

Download Skill Open repository

Author: soymustamahti
stars: 0
Updated: Mar 16, 2026
Occupation

On this page

Data Access Rules

Do not call Axios directly from page components
Put Axios configuration in lib/api
Wrap server interactions in React Query hooks under hooks
Expose stable hook APIs that future UI can reuse

Suggested Layout

components/ui: shadcn/ui primitives
components/features: document upload, extraction state, validation panel, correction chat
hooks: query hooks and UI state helpers
lib/api: Axios client, endpoint clients, request helpers
providers: query provider and any app providers
types: frontend-only view models or shared API contracts

UX Rules For This Project

The correction screen should show chat, current extraction state, and validation issues together
Confidence and validation severity should be visually distinct but not noisy
Undo must be immediately available
Progress streaming should feel live and trustworthy

When In Doubt

Read:

.codex/references/architecture-target.md
.codex/references/delivery-plan.md

02

UI Direction

03Component Rules

04Data Access Rules

05Suggested Layout

06UX Rules For This Project

07When In Doubt

Software Developers

microsoft-vscode-extensions-copilot-assets-prompts-skills-project-setup-info-context7-skill-md

$3e

microsoft184.0k

How to setup a project

$3d

microsoft184.0k

Coding Standards

适用于TypeScript、JavaScript、React和Node.js开发的通用编码标准、最佳实践和模式。

Nuxt4 Patterns

Nuxt 4 app patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData.

Coding Standards

TypeScript、JavaScript、React、Node.js開発のための汎用コーディング標準、ベストプラクティス、パターン。

Nextjs Turbopack

Next.js 16+ and Turbopack — incremental bundling, FS caching, dev speed, and when to use Turbopack vs webpack.

Software Developers