{
  "id": "skl_57ed64e03cd0",
  "slug": "skill-next-js-tailwind-typescript",
  "asset_type": "skill",
  "name": "Next.js (Tailwind, TypeScript) — Production Architecture & Agent Playbook",
  "tagline": "Next.js development with Tailwind CSS and TypeScript integration.",
  "description_md": "### Overview & Capability Scope\n**Next.js (Tailwind, TypeScript) — Production Architecture & Agent Playbook** (`skill-next-js-tailwind-typescript`) is a verified, portable `SKILL.md` playbook curated with **@nutlope** for Grok Bot (`x.ai/bot/`), Claude Code (`~/.claude/skills/`), and Cursor (`.cursor/skills/`).\n\nNext.js development with Tailwind CSS and TypeScript integration.\n\n### Required Stack & Tooling\n- **Primary Stack:** Next.js, Tailwind, TypeScript\n- **Category:** `engineering`\n- **Source & Reference:** [https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/nextjs-tailwind-typescript-apps-cursorrules-prompt.mdc](https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/nextjs-tailwind-typescript-apps-cursorrules-prompt.mdc)\n\n### Quickstart Installation\nInstall this `SKILL.md` playbook directly into your agent workspace:\n```bash\nnpx lightstate install skill-next-js-tailwind-typescript\n```\nOr copy the complete `SKILL.md` specification below into `.cursor/skills/skill-next-js-tailwind-typescript/SKILL.md` or `~/.claude/skills/skill-next-js-tailwind-typescript/SKILL.md`.\n\n### Verification Commands\n```bash\nnpx lightstate install skill-next-js-tailwind-typescript\ngit status --short\nnpm test || pytest || cargo test\n```\n",
  "primary_category": "engineering",
  "categories_json": "[\"engineering\", \"skills\"]",
  "tags_json": "[\"next.js\", \"tailwind\", \"typescript\", \"skill-md\", \"engineering\"]",
  "compatible_agents_json": "[\"grok-bot\", \"claude-code\", \"cursor\"]",
  "integrations_json": "[\"Next.js\", \"Tailwind\", \"TypeScript\"]",
  "includes_json": "[]",
  "safety_level": "Read-Only / Ask-First",
  "safety_summary": "Verified capability blueprint by @nutlope.",
  "share_url": "",
  "deep_link_uri": "",
  "mcp_endpoint": "",
  "mcp_transport": "http",
  "install_command": "npx lightstate install skill-next-js-tailwind-typescript",
  "skill_markdown": "---\nname: next-js-tailwind-typescript\ndescription: Next.js development with Tailwind CSS and TypeScript integration. Use when working with Next.js, Tailwind, TypeScript.\ntriggers:\n  - next js tailwind typescript\n  - next.js\n  - tailwind\n---\n\n# Next.js (Tailwind, TypeScript) — Production Architecture & Agent Playbook\n\n## 1. When to Use This Skill\nLoad `skill-next-js-tailwind-typescript` whenever an engineering, architecture, or operations task involves **Next.js, Tailwind, TypeScript**. Specifically:\n- Next.js development with Tailwind CSS and TypeScript integration.\n- Designing, reviewing, refactoring, or debugging production configurations without guesswork or deprecated flags.\n- Running deterministic pre-flight validation and post-execution verification checks before reporting completion.\n\n## 2. Prerequisites & Required Environment\n- **Target Stack:** Next.js, Tailwind, TypeScript\n- **Permissions Boundary:** Read-only inspection by default; ask for explicit human confirmation before executing destructive mutations or production deployments.\n- **Reference Specification:** `https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/nextjs-tailwind-typescript-apps-cursorrules-prompt.mdc`\n\n## 3. Step-by-Step Execution Playbook\n1. **Context & Configuration Discovery:**\n   Inspect existing project manifests (`package.json`, `tsconfig.json`, `pyproject.toml`, `Cargo.toml`, `wrangler.jsonc`, or schema declarations) before proposing changes. Never overwrite existing bindings or credentials blindly.\n2. **Deterministic Implementation:**\n   Apply the canonical production patterns for **Next.js**:\n   - Enforce strict schema and type validation at every external boundary.\n   - Include explicit error handling, structured telemetry, and idempotency keys on all mutating calls.\n   - Keep secrets in environment variables or managed secret stores—never hardcode tokens in source files.\n3. **Verification & Regression Gate:**\n   Run the verification commands below and inspect both exit codes and output payloads before marking the task complete.\n\n## 4. Reference Commands & CLI Workflow\n```bash\nnpx lightstate install skill-next-js-tailwind-typescript\ngit status --short\nnpm test || pytest || cargo test\n```\n\n## 5. Edge Cases & Anti-Hallucination Guardrails\n- **Zero Unverified Claims:** Never claim a build, migration, test run, or API call succeeded without inspecting the command output or HTTP status code.\n- **Rollback Readiness:** Always record the previous state or migration version so changes can be reverted cleanly if downstream health checks fail.\n",
  "starter_prompt": "Load the Next.js (Tailwind, TypeScript) — Production Architecture & Agent Playbook (skill-next-js-tailwind-typescript) playbook. First inspect our current configuration and codebase for Next.js, Tailwind, TypeScript. Then propose a concrete, step-by-step implementation plan following the skill-next-js-tailwind-typescript guardrails, run the non-destructive verification commands (npx lightstate install skill-next-js-tailwind-typescript), and summarize any findings, risks, or required environment variables before making production changes.",
  "project_url": "https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/nextjs-tailwind-typescript-apps-cursorrules-prompt.mdc",
  "repo_url": "https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/nextjs-tailwind-typescript-apps-cursorrules-prompt.mdc",
  "creator_handle": "nutlope",
  "creator_name": "Hassan El Mghari (@nutlope)",
  "creator_avatar_url": null,
  "creator_url": "https://x.com/nutlope",
  "creator_platform": "x",
  "creator_cal_url": null,
  "claimed_by_user_id": null,
  "scouted_by_handle": null,
  "source_url": "https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/nextjs-tailwind-typescript-apps-cursorrules-prompt.mdc",
  "source_tweet_id": null,
  "source_origin": "certified_builder",
  "source_posted_at": null,
  "x_likes": 346,
  "x_bookmarks": 788,
  "x_retweets": 197,
  "x_views": 4844,
  "human_upvotes": 346,
  "human_installs": 346,
  "bot_pulls": 788,
  "pulse_score": 86,
  "gravity_rank_score": 2781,
  "is_featured": 0,
  "is_verified": 1,
  "is_sponsored": 0,
  "sponsor_tier": "free",
  "sponsor_label": "",
  "sponsor_cta_url": "",
  "sponsor_expires_at": null,
  "commercial_intent_score": 0,
  "status": "active",
  "created_at": "2026-10-24T22:25:00Z",
  "updated_at": "2026-10-24T22:25:00Z",
  "verified_at": null,
  "primitive": "skill",
  "title": "Next.js (Tailwind, TypeScript) — Production Architecture & Agent Playbook",
  "description": "Next.js development with Tailwind CSS and TypeScript integration.",
  "category": "engineering",
  "tags": "[\"next.js\", \"tailwind\", \"typescript\", \"skill-md\", \"engineering\"]",
  "agent_compatibility": "[\"grok-bot\", \"claude-code\", \"cursor\"]",
  "author_handle": "nutlope",
  "author_name": "Hassan El Mghari (@nutlope)",
  "author_avatar": null,
  "source_tweet_url": "https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/nextjs-tailwind-typescript-apps-cursorrules-prompt.mdc",
  "github_url": "https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/nextjs-tailwind-typescript-apps-cursorrules-prompt.mdc",
  "external_url": "https://github.com/PatrickJS/awesome-cursorrules/blob/main/rules/nextjs-tailwind-typescript-apps-cursorrules-prompt.mdc",
  "upvotes_count": 346,
  "installs_count": 346
}