build-and-test
Build, test, lint, and validate the Phoenix Agentic Website Frontend. Use when user asks to build, compile, test, lint, run checks, fix test failures, or validate changes in the Website Frontend repo.
Best use case
build-and-test is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Build, test, lint, and validate the Phoenix Agentic Website Frontend. Use when user asks to build, compile, test, lint, run checks, fix test failures, or validate changes in the Website Frontend repo.
Teams using build-and-test should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/build-and-test/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How build-and-test Compares
| Feature / Agent | build-and-test | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Build, test, lint, and validate the Phoenix Agentic Website Frontend. Use when user asks to build, compile, test, lint, run checks, fix test failures, or validate changes in the Website Frontend repo.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Build & Test — Phoenix Agentic Website Frontend (Next.js) ## Mandatory first step: terminal scope check Before build/test commands, verify terminal scope: 1. `Set-Location "C:\Users\rivie\vsCodeProjects\Phoenix-Agentic-Website-Frontend"` 2. `Get-Location` 3. `git rev-parse --show-toplevel` 4. `git branch --show-current` If scope is wrong, open a fresh Website Frontend-scoped terminal and retry. ## Repo Identity This is the **public website frontend**. Next.js app with TypeScript, React, and Tailwind CSS. ## Quick Commands | Task label | Command | Purpose | |------------|---------|---------| | `website: dev: setup` | `npm install` | Install dependencies | | `website: dev: run` | `npm run dev` | Start dev server | | `website: dev: lint` | `npm run lint` | Run ESLint | | `website: dev: typecheck` | `npm run typecheck` | Run tsc --noEmit | | `website: dev: test` | `npm run test` | Run vitest | | `website: dev: build` | `npm run build` | Production build | | `website: dev: check` | lint + typecheck + test + build | Full validation | | `website: dev: clean` | Remove .next, coverage, dist | Clean artifacts | ## Using VS Code Tasks Prefer using `run_task` or `create_and_run_task` to execute these tasks. Task IDs: - `shell: website: dev: setup` - `shell: website: dev: run` - `shell: website: dev: lint` - `shell: website: dev: typecheck` - `shell: website: dev: test` - `shell: website: dev: build` - `shell: website: dev: check` - `shell: website: dev: clean` ## Manual Commands (if needed) ```bash # Install npm install # Lint npm run lint # Typecheck npm run typecheck # Test npm run test # Build npm run build ``` ## Validation checklist 1. **Lint passes** — `npm run lint` 2. **Typecheck passes** — `npm run typecheck` 3. **Tests pass** — `npm run test` 4. **Build succeeds** — `npm run build` 5. **Full check** — `npm run lint; npm run typecheck; npm run test; npm run build` ## Testing rules - Tests must be deterministic — no network calls, no randomness without seed control - Use vitest for all tests - Always run full check before considering work complete ## Common issues | Error | Fix | |-------|-----| | `npm ci` failure | Delete `node_modules` and `package-lock.json`, run `npm install` | | ESLint errors | Run `npm run lint` and fix violations | | TypeScript errors | Run `npm run typecheck` locally | | Next.js build failure | Check for SSR-incompatible imports | | Test failure | Run `npm run test` locally, check assertions |
Related Skills
claude-agent-sdk-builder
Guide for building agents with the Claude Agent SDK (TypeScript/Node.js). Use when creating SDK-based agents, custom tools, in-code subagents, or production agent applications. Provides templates, patterns, and best practices for agent development.
chatgpt-app-builder
Build ChatGPT apps with interactive widgets using mcp-use and OpenAI Apps SDK. Use when creating ChatGPT apps, building MCP servers with widgets, defining React widgets, working with Apps SDK, or when user mentions ChatGPT widgets, mcp-use widgets, or Apps SDK development.
bun-testing
Testing guidelines for Bun/TypeScript projects using bun:test framework. Use when writing tests, creating test files, debugging test failures, setting up mocks, or reviewing test code. Triggers on *.test.ts files, test-related questions, mocking patterns, and coverage discussions.
building-streamlit-custom-components-v2
Builds bidirectional Streamlit Custom Components v2 (CCv2) using `st.components.v2.component`. Use when authoring inline HTML/CSS/JS components or packaged components (manifest `asset_dir`, js/css globs), wiring state/trigger callbacks, theming via `--st-*` CSS variables, or bundling with Vite / `component-template` v2.
building-chatgpt-apps
Guides creation of ChatGPT Apps with interactive widgets using the Apps SDK and MCP servers. Use when building ChatGPT custom apps with visual UI components, embedded widgets, or rich interactive experiences. Covers widget architecture, MCP server setup with FastMCP, response metadata, and Developer Mode configuration. NOT when building standard MCP servers without widgets (use building-mcp-servers skill instead).
build-things
Build software features end to end in an existing repository. Use when the user asks to build, implement, add, create, wire up, or ship code changes, including backend, frontend, APIs, and automation tasks.
Build Script-Execution Skill
Create a skill that orchestrates the write-execute-analyze loop to autonomously process data. Learn to implement error recovery, iterate toward robust solutions, and test your skill across diverse input scenarios. This is where specification-driven development meets real problem-solving.
build-app-step01
Use when users are building or scaling ChatGPT Apps / Apps SDK / MCP-based apps and want a preventive workflow to avoid common pitfalls before implementation, deployment, and growth. Trigger for requests about best practices, preflight checks, guardrails, checklists, workflow SOP, reliability, evals, and production readiness.
build-agent-python
Python build agent for scripts, backends, data pipelines, and ML projects. Extends build-agent with Python conventions. Use when building Python applications, APIs, data processing, or automation.
browser-testing
Use when testing web applications, debugging browser console errors, automating form interactions, or verifying UI implementations. Load for localhost testing, authenticated app testing (Gmail, Notion), or recording demo GIFs. Requires Chrome extension 1.0.36+, Claude Code 2.0.73+, paid plan.
blog-smoke-tests
Run Playwright smoke tests for Denser blog application. Executes 15 tests (SMOKE-01 to SMOKE-15) against configurable environment (production, dev, or localhost) with retry support (max 3 attempts per failing test). Supports headed (visible browser) and headless modes. Collects artifacts (screenshots, trace.zip) on failures and generates HTML report. Use when testing blog functionality, verifying deployments, checking UI/API consistency, or when user requests smoke tests, playwright tests, or blog testing.
bazel-build-optimization
Optimize Bazel builds for large-scale monorepos. Use when configuring Bazel, implementing remote execution, or optimizing build performance for enterprise codebases.