Skip to main content

AI-slop-mastery

AI-assisted coding​

The workflow​

1) Context is king​

  • Problem: The more context you feed to your agent, the worse it performs. Keep context small.
  • Solution: Use /compact to compact and summarize your conversation history in claude code, or just prompt the AI to summarize the entire conversation history and put that into a markdown file, which you can then feed as context into a new chat.

2) Write E2E tests​

End to end tests will give you the biggest bang for your buck.

3) Review every line of code​

No excuses. If you didn't write it, then review it.

4) Abstract first​

LLMs perform better when there is some sort of structure in your coding, for example, using TS or building abstractions in simple interfaces on top of third-party libraries will help the AI to understand your coding style, and it will build off of that.

5) Actually doing it​

  1. Create a features.md to track features, describe them, and cross them off incrementally.
  2. Always ask the agent to plan through solving a feature before implementing it.
  3. Always use a living document for features, saving progress you made on a feature and describing it so you can feed it as context even when starting a brand new convo.

Summary​

  1. Plan First: Never let the AI code without a plan.md. Read the plan. If the plan is wrong, the code will be wrong.

  2. Give it Eyes (Harnesses): The AI cannot see the UI. Give it a dry-run script or a npm test so it can "see" if it broke something.

  3. Review is Mandatory: AI is not a replacement for knowing how to code. It is a replacement for typing. You must review every line (or use tools like Graphite/CodeRabbit for a second opinion).

Model agnostic inference​

Some platforms like Cursor or Warp allow you to BYOK or BYOM (bring your own model), where you need to specify these three pieces of information in order to run model inference:

  1. model endpoint: something like https://opencode.ai/zen/v1/chat/completions which is the REST API endpoint for running inference on a specific model provider.
  2. API key: the API key for the provider
  3. model tag: the specific model identifier to user, like deepseek-v4-flash-free.

Here are the different endpoint families:

  • /v1/responses: for newer GPT models
  • /v1/chat/completions: works with all openAI compatible endpoints
  • /v1/messages: works only with Anthropic family models.

Inference with Opencode Zen​

The endpoint URL is https://opencode.ai/zen/v1, with the OpenAI-compatible inference endpoint being https://opencode.ai/zen/v1/chat/completions.

Here are the general endpoints:

  • https://opencode.ai/zen/v1/models: returns list of all models hosted on OpenCode ZEN

Opencode free models

Model nameModel identifierModel inference endpoint
Big Picklebig-picklehttps://opencode.ai/zen/v1/chat/completions
MiMo-V2.5 Freemimo-v2.5-freehttps://opencode.ai/zen/v1/chat/completions
North Mini Code Freenorth-mini-code-freehttps://opencode.ai/zen/v1/chat/completions
Nemotron 3 Ultra Freenemotron-3-ultra-freehttps://opencode.ai/zen/v1/chat/completions
DeepSeek V4 Flash Freedeepseek-v4-flash-freehttps://opencode.ai/zen/v1/chat/completions

All open code models

You can also access our models through the following API endpoints.

ModelModel IDEndpointAI SDK Package
GPT 6 Astragpt-6-astrahttps://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.6 Solgpt-5.6-solhttps://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.6 Terragpt-5.6-terrahttps://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.6 Lunagpt-5.6-lunahttps://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.5gpt-5.5https://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.5 Progpt-5.5-prohttps://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.4gpt-5.4https://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.4 Progpt-5.4-prohttps://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.4 Minigpt-5.4-minihttps://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.4 Nanogpt-5.4-nanohttps://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.3 Codexgpt-5.3-codexhttps://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.3 Codex Sparkgpt-5.3-codex-sparkhttps://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.2gpt-5.2https://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.2 Codexgpt-5.2-codexhttps://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.1gpt-5.1https://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.1 Codexgpt-5.1-codexhttps://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.1 Codex Maxgpt-5.1-codex-maxhttps://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5.1 Codex Minigpt-5.1-codex-minihttps://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5gpt-5https://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5 Codexgpt-5-codexhttps://opencode.ai/zen/v1/responses@ai-sdk/openai
GPT 5 Nanogpt-5-nanohttps://opencode.ai/zen/v1/responses@ai-sdk/openai
Claude Fable 5.1claude-fable-5-1https://opencode.ai/zen/v1/messages@ai-sdk/anthropic
Claude Fable 5claude-fable-5https://opencode.ai/zen/v1/messages@ai-sdk/anthropic
Claude Opus 5claude-opus-5https://opencode.ai/zen/v1/messages@ai-sdk/anthropic
Claude Opus 4.8claude-opus-4-8https://opencode.ai/zen/v1/messages@ai-sdk/anthropic
Claude Opus 4.7claude-opus-4-7https://opencode.ai/zen/v1/messages@ai-sdk/anthropic
Claude Opus 4.6claude-opus-4-6https://opencode.ai/zen/v1/messages@ai-sdk/anthropic
Claude Opus 4.5claude-opus-4-5https://opencode.ai/zen/v1/messages@ai-sdk/anthropic
Claude Sonnet 5claude-sonnet-5https://opencode.ai/zen/v1/messages@ai-sdk/anthropic
Claude Sonnet 4.6claude-sonnet-4-6https://opencode.ai/zen/v1/messages@ai-sdk/anthropic
Claude Sonnet 4.5claude-sonnet-4-5https://opencode.ai/zen/v1/messages@ai-sdk/anthropic
Claude Haiku 4.5claude-haiku-4-5https://opencode.ai/zen/v1/messages@ai-sdk/anthropic
Gemini 3.8 Flashgemini-3.8-flashhttps://opencode.ai/zen/v1/models/gemini-3.8-flash@ai-sdk/google
Gemini 3.7 Flashgemini-3.7-flashhttps://opencode.ai/zen/v1/models/gemini-3.7-flash@ai-sdk/google
Gemini 3.6 Flashgemini-3.6-flashhttps://opencode.ai/zen/v1/models/gemini-3.6-flash@ai-sdk/google
Gemini 3.5 Flashgemini-3.5-flashhttps://opencode.ai/zen/v1/models/gemini-3.5-flash@ai-sdk/google
Gemini 3.5 Flash Litegemini-3.5-flash-litehttps://opencode.ai/zen/v1/models/gemini-3.5-flash-lite@ai-sdk/google
Gemini 3.1 Progemini-3.1-prohttps://opencode.ai/zen/v1/models/gemini-3.1-pro@ai-sdk/google
Gemini 3 Flashgemini-3-flashhttps://opencode.ai/zen/v1/models/gemini-3-flash@ai-sdk/google
Grok 4.6grok-4.6https://opencode.ai/zen/v1/responses@ai-sdk/openai
Grok 4.5grok-4.5https://opencode.ai/zen/v1/responses@ai-sdk/openai
Grok Build 0.1grok-build-0.1https://opencode.ai/zen/v1/responses@ai-sdk/openai
Muse Spark 1.3muse-spark-1.3https://opencode.ai/zen/v1/responses@ai-sdk/openai
Muse Spark 1.2muse-spark-1.2https://opencode.ai/zen/v1/responses@ai-sdk/openai
Qwen3.7 Maxqwen3.7-maxhttps://opencode.ai/zen/v1/messages@ai-sdk/anthropic
Qwen3.7 Plusqwen3.7-plushttps://opencode.ai/zen/v1/messages@ai-sdk/anthropic
Qwen3.6 Plusqwen3.6-plushttps://opencode.ai/zen/v1/messages@ai-sdk/anthropic
Qwen3.5 Plusqwen3.5-plushttps://opencode.ai/zen/v1/messages@ai-sdk/anthropic
DeepSeek V4 Prodeepseek-v4-prohttps://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
DeepSeek V4 Flashdeepseek-v4-flashhttps://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
DeepSeek V4 Flash Vision Expdeepseek-v4-flash-vision-exphttps://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
MiniMax M3minimax-m3https://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
MiniMax M2.7minimax-m2.7https://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
MiniMax M2.5minimax-m2.5https://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
GLM 5.3 Flashglm-5.3-flashhttps://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
GLM 5.3glm-5.3https://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
GLM 5.2glm-5.2https://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
GLM 5.1glm-5.1https://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
GLM 5glm-5https://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
Kimi K2.5kimi-k2.5https://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
Kimi K2.6kimi-k2.6https://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
Kimi K2.7 Codekimi-k2.7-codehttps://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
Kimi K3kimi-k3https://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
Big Picklebig-picklehttps://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
Union Alpha Freeunion-alphahttps://opencode.ai/zen/v1/messages@ai-sdk/anthropic
MiMo-V2.5 Freemimo-v2.5-freehttps://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
Ling 3.0 Flash Fin Freeling-3.0-flash-fin-freehttps://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
Nemotron 3 Ultra Freenemotron-3-ultra-freehttps://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
Nemotron 3.5 Lightning Freenemotron-3.5-lightning-freehttps://opencode.ai/zen/v1/chat/completions@ai-sdk/openai-compatible
Muse Spark 1.3 Contributor Freemuse-spark-1.3-contributor-freehttps://opencode.ai/zen/v1/responses@ai-sdk/openai

Inference with vercel AI API GATEWAY​

These are the free models vercel AI API gateway has:

ModelContextLatencyThroughputInputOutputCache
nvidia/nemotron-3.5-lightning1M0.1s48tpsFreeFreeRead: $0.01/M Free Write: —
nvidia/nemotron-3.5-lightning-free1M0.1s48tpsFreeFree
fish-audio/s2.1-proFreeFree
fish-audio/s2.1-pro-freeFreeFree
poolside/laguna-s-2.1-free256K1.4s68tpsFreeFree
fish-audio/s2-proFreeFree
fish-audio/s2-pro-freeFreeFree
fish-audio/transcribe-1FreeFree
fish-audio/transcribe-1-freeFreeFree
fish-audio/s1FreeFree
fish-audio/s1-freeFreeFree

Inference with Kilo Code​

Kilocode free models

Kilocode allows you to use other inference endpoint providers but you can also use these free models that come with kilocode:

title: "Best Free AI Coding Models Available Now | Kilo Code"
image: "https://kilo.ai/kilocode-social.png"
description: "Find the best currently tested free AI coding models in Kilo Code, plus a live catalog of hosted models with $0 input and $0 output token pricing."
url: "https://kilo.ai/landing/free-models"
favicon: ""
aspectRatio: "56.35062611806798"

Inference with NVidia APIs​

from openai import OpenAI
import os
import sys

_USE_COLOR = sys.stdout.isatty() and os.getenv("NO_COLOR") is None
_REASONING_COLOR = "\033[90m" if _USE_COLOR else ""
_RESET_COLOR = "\033[0m" if _USE_COLOR else ""

client = OpenAI(
  base_url = "https://integrate.api.nvidia.com/v1",
  api_key = "YOUR_NVIDIA_API_KEY"
)


completion = client.chat.completions.create(
  model="z-ai/glm-5.2",
  messages=[{"role":"user","content":""}],
  temperature=1,
  top_p=1,
  max_tokens=16384,
  seed=42,
  
  stream=True
)

for chunk in completion:
  if not getattr(chunk, "choices", None):
    continue
  if len(chunk.choices) == 0 or getattr(chunk.choices[0], "delta", None) is None:
    continue
  delta = chunk.choices[0].delta
  if getattr(delta, "content", None) is not None:
    print(delta.content, end="")

nvidia free models

The endpoint URL is https://integrate.api.nvidia.com/v1, with the OpenAI-compatible inference endpoint being https://integrate.api.nvidia.com/v1/chat/completions

namemodelTagparam count
nemotron-3-super-120b-a12bnvidia/nemotron-3-super-120b-a12b120B
nemotron-3-ultra-550b-a55bnvidia/nemotron-3-ultra-550b-a55b550B
gpt-oss-120bopenai/gpt-oss-120b120B
llama-3.3-70b-instructmeta/llama-3_3-70b-instruct70B
qwen3-next-80b-a3b-instructqwen/qwen3-next-80b-a3b-instruct80B
gpt-oss-20bopenai/gpt-oss-20b20B
llama-3.1-8b-instructmeta/llama-3_1-8b-instruct8B
deepseek-v4-flashdeepseek-ai/deepseek-v4-flashN/A
qwen3.5-397b-a17bqwen/qwen3.5-397b-a17b397B
llama-4-maverick-17b-128e-instructmeta/llama-4-maverick-17b-128e-instruct400B (17B x 128E MoE)
kimi-k2.6moonshotai/kimi-k2.6N/A
minimax-m2.7minimaxai/minimax-m2.7N/A
qwen3.5-122b-a10bqwen/qwen3.5-122b-a10b122B
llama-3.1-nemotron-nano-vl-8b-v1nvidia/llama-3.1-nemotron-nano-vl-8b-v18B
nemotron-3-nano-30b-a3bnvidia/nemotron-3-nano-30b-a3b30B
mistral-small-4-119b-2603mistralai/mistral-small-4-119b-2603119B
minimax-m3minimaxai/minimax-m3N/A
step-3.5-flashstepfun-ai/step-3.5-flashN/A
nemotron-3-nano-omni-30b-a3b-reasoningnvidia/nemotron-3-nano-omni-30b-a3b-reasoning30B
glm-5.2z-ai/glm-5.2N/A
step-3.7-flashstepfun-ai/step-3.7-flashN/A
deepseek-v4-prodeepseek-ai/deepseek-v4-proN/A
llama-3.3-nemotron-super-49b-v1.5nvidia/llama-3_3-nemotron-super-49b-v1_549B
llama-3.3-nemotron-super-49b-v1nvidia/llama-3_3-nemotron-super-49b-v149B
gemma-4-31b-itgoogle/gemma-4-31b-it31B
llama-3.1-70b-instructmeta/llama-3_1-70b-instruct70B
nemotron-nano-12b-v2-vlnvidia/nemotron-nano-12b-v2-vl12B
gemma-2-2b-itgoogle/gemma-2-2b-it2B
mistral-medium-3.5-128bmistralai/mistral-medium-3.5-128b128B
nv-embed-v1nvidia/nv-embed-v1N/A
ministral-14b-instruct-2512mistralai/ministral-14b-instruct-251214B
llama-3.2-90b-vision-instructmeta/llama-3.2-90b-vision-instruct90B
diffusiongemma-26b-a4b-itgoogle/diffusiongemma-26b-a4b-it26B
llama-3.2-11b-vision-instructmeta/llama-3.2-11b-vision-instruct11B
nemotron-mini-4b-instructnvidia/nemotron-mini-4b-instruct4B
gemma-3n-e4b-itgoogle/gemma-3n-e4b-it4B
nvidia-nemotron-nano-9b-v2nvidia/nvidia-nemotron-nano-9b-v29B
nemotron-3.5-content-safetynvidia/nemotron-3.5-content-safetyN/A
nv-embedcode-7b-v1nvidia/nv-embedcode-7b-v17B
gemma-3n-e2b-itgoogle/gemma-3n-e2b-it2B
llama-3.2-3b-instructmeta/llama-3.2-3b-instruct3B
rerank-qa-mistral-4bnvidia/rerank-qa-mistral-4b4B
mistral-nemotronmistralai/mistral-nemotron12B
llama-3.1-nemotron-nano-8b-v1nvidia/llama-3_1-nemotron-nano-8b-v18B
dracarys-llama-3.1-70b-instructabacusai/dracarys-llama-3_1-70b-instruct70B
mixtral-8x7b-instruct-v0.1mistralai/mixtral-8x7b-instruct47B (8x7B MoE)
seed-oss-36b-instructbytedance/seed-oss-36b-instruct36B
esmfoldmeta/esmfold3B
llama-3.2-1b-instructmeta/llama-3.2-1b-instruct1B
solar-10.7b-instructupstage/solar-10_7b-instruct10.7B
gliner-piinvidia/gliner-piiN/A
ising-calibration-1-35b-a3bnvidia/ising-calibration-1-35b-a3b35B
sarvam-msarvamai/sarvam-mN/A
llama-guard-4-12bmeta/llama-guard-4-12b12B
llama-3.1-nemotron-safety-guard-8b-v3nvidia/llama-3_1-nemotron-safety-guard-8b-v38B
riva-translate-4b-instruct-v1_1nvidia/riva-translate-4b-instruct-v1_14B
synthetic-video-detectornvidia/synthetic-video-detectorN/A
magpie-tts-zeroshotnvidia/magpie-tts-zeroshotN/A
paligemmagoogle/google-paligemma3B
Studio Voicenvidia/studiovoiceN/A
esm2-650mmeta/esm2-650m650M
cosmos3-nano-reasonernvidia/cosmos3-nano-reasonerN/A
cosmos3-nanonvidia/cosmos3-nanoN/A
Active Speaker Detectionnvidia/active-speaker-detectionN/A
Background Noise Removalnvidia/bnrN/A
nemotron-voicechatnvidia/nemotron-voicechatN/A
cosmos-transfer1-7bnvidia/cosmos-transfer1-7b7B
streampetrnvidia/streampetrN/A
bevformernvidia/bevformerN/A
sparsedrivenvidia/sparsedriveN/A
cosmos-transfer2.5-2bnvidia/cosmos-transfer2_5-2b2B
inklingthinkingmachines/inklingN/A
ising-calibration-1.5-31bnvidia/ising-calibration-1.5-31b31B
laguna-xs-2.1poolside/laguna-xs-2.1N/A
nemotron-3-embed-1bnvidia/nemotron-3-embed-1b1B
nemotron-3.5-nano-30b-a3bnvidia/nemotron-3.5-nano-30b-a3b30B
seallm-7b-v2.5seallms/seallm-7b7B

MCP​

Deploying to MCP clients​

All MCP clients have the same way of deploying, which is listing the commands to run the MCP servers or the existing urls hosting MCP servers in a JSON file like so:

{
  "mcpServers": {
    "local-mcp-server": {
      "command": "deno",
      "args": [
        "run",
        "-A",
        "C:/Users/Waadl/OneDrive/Documents/dbdildev/mcp/local-mcp-server/main.ts"
      ],
      "env": {
        "GOOGLE_GENERATIVE_AI_API_KEY": "Eafsadfdsafasfdsafsd",
        "OPENAI_API_KEY": "sk-pasfsafsadfaHfsadsfdEgsRIsaffdsDNVsafdfsdad"
      }
    },
    "memory": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-memory"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_FfadffdsasadRW9p"
      }
    }
  }
}

Claude desktop​

you can add MCP servers in the ~\AppData\Roaming\Claude\claude_desktop_config.json path

Cursor​

Go to cursor MCP settings and you can add MCP servers in the ~\.cursor\mcp.json file, or you can just go to cursor settings -> MCP settings.

You can also set local MCP settings for your workspace, which is often way more efficient by creating a .cursor/mcp.json file:

.cursor/mcp.json
{
  "mcpServers": {
    "mcpmcp": {
      "command": "npx",
      "args": ["-y", "mcp-remote@latest", "https://mcpmcp.io/mcp"]
    }
  }
}

MCP use cases​

Awesome MCP: list of MCP servers​

Vibing with MCP​

Here is the ultimate way to vibe code using MCP servers:

  • github skill: create issues, PRs, assign AI bots to your pull requests
  • neon MCP: connect to a database so the schemas are known at all times.
  • playwright MCP: Tell it to "make liberal use of Playwright to make sure that UI looks and acts correctly and set up integration tests."
  • context7: context7 for docs, tell the model to use context7 for some libraries that might be esoteric.

Tech stack:

  • neon auth
  • neon db: Use neon with drizzle, and specifically prompt it, "DO NOT MODIFY THE MIGRATIONS DIRECTLY, ONLY USE DRIZZLE"
  • nextjs + typescript + shadcdn + tailwindcss: specify nextjs 15 modern strategies like limiting client components
  • zod, react query, zustand

Here is the full vibing prompt

---REPLACE PROMPT BELOW-----
I am making a Todoist clone. I want it to have the following features

- Multiple users
- Users can CRUD their todos
- Users can mark their todos as done
- Users cannot share todos - you can assume that a todo belongs to one person
- Users can use tags to tag their todos. Examples would be work, personal, or fun. Users can CRUD tags. A todo can have multiple tags.
- Users can sign, sign out, and log out.
------------------------------

For the tech stack, please use

- Next.js 16 and TypeScript
- shadcn - please use shadcn as the styling method as much as possible to be consistent
- Neon Postgres for the database, connected via neon MCP
- Neon Auth for the auth - please use Context7 to make sure you have up to date docs on Neon Auth
- Drizzle for the ORM
- TypeScript
- ESLint
- Vitest for testing
- Playwright for integration tests

Please:

- include decent coverage of tests
- use Playwright MCP server to test that UI is styled correctly and interactions work as planned
- use Context7 liberally to make sure you have the latest docs for various libraries.
- prepare this to be deployed to Vercel afterwards.
- DO NOT WRITE OR MODIFY MIGRATIONS YOURSELF. ONLY USE DRIZZLE FOR MIGRATIONS.

Condensing docs​

One of the most important uses of MCP is giving online, up-to-date docs for an AI agent to consume. There are two ways you can do this:

  • Context7: An MCP server that has tools to fetch online documentation and return it as markdown.
  • RepoMix: Go to the Repomix website to download the entire docs as a markdown file you cna then feed into LLMs.

Context7 MCP​

Looks like this:

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

Chrome devtools MCP​

The Chrome DevTools MCP lets AI agents like Claude interact directly with your running browser. It gives the AI "eyes" to take screenshots, read console messages, inspect network requests, and record performance traces.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

Make sure to start a chrome instance with remote debugging available for this to work:

google-chrome --remote-debugging-port=9222

Playwright MCP​

Installation​

Claude

Skills​

Custom skill examples​

Frontend design skill​

# Frontend Design Skill

ALSO USE TAILWIND, change tailwind config and variables according to design principles in this skill, use it for everything, only escape to CSS for extremely custom things

## Purpose
This skill helps Claude create distinctive, memorable frontends that avoid generic AI-generated design patterns. It emphasizes typography, color cohesion, motion, and intentional interactions that elevate user experience.

## Principles

### 1. Distinctive Typography
- Use Google Fonts strategically for personality (serif + sans-serif combinations)
- Implement proper typographic hierarchy with `clamp()` for responsive scaling
- Employ letter-spacing and font-weight strategically for emphasis
- Examples: Playfair Display for headlines, custom sans-serif for body
- Avoid: Default system fonts, inconsistent font sizes, poor line-height

### 2. Cohesive Color Systems
- Define CSS variables for semantic color naming (primary, accent, background, text)
- Use gradients sparingly but effectively for visual interest
- Maintain contrast ratios (WCAG AA minimum 4.5:1 for text)
- Create a 5-8 color palette with defined relationships
- Use opacity and alpha channels for depth (rgba)
- Avoid: Random hex colors, unnamed colors scattered across CSS

### 3. Orchestrated Motion & Animation
- Apply staggered animations (offset delays) to sequenced elements
- Use easing functions like `cubic-bezier(0.34, 1.56, 0.64, 1)` for personality
- Animate transforms (scale, rotate, translateY) not properties that trigger layout
- Provide visual feedback on interactive elements (hover, focus)
- Use `backdrop-filter: blur()` for glassmorphism effects
- Avoid: Motion that doesn't serve purpose, jarring animations, excessive transitions

### 4. High-Impact Micro-Interactions
- Hover states that provide feedback (scale, color shift, border change)
- Animated underlines on navigation links
- Icon animations on hover (rotate, scale)
- Smooth transitions on state changes
- Loading states and visual confirmations
- Avoid: Static, unresponsive interfaces

### 5. Layout & Spacing
- Use CSS custom properties for consistent spacing (--spacing-xs through --spacing-2xl)
- Implement max-width containers for readability
- Use CSS Grid and Flexbox with proper gap management
- Responsive design with mobile-first approach
- Whitespace as a design element
- Avoid: Fixed pixels, inconsistent spacing, layouts that don't adapt

### 6. Anti-Patterns to Avoid (AI Slop)
- Flat, colorless purple/blue gradients without intention
- System font (Inter) with no personality
- Pure white backgrounds with gray text
- Generic emoji icons
- No visual hierarchy or emphasis
- Static content with zero interactivity
- Generic marketing copy ("Streamline Your Workflow")

## Implementation Checklist

- [ ] Define CSS variables for colors, spacing, typography
- [ ] Implement 2+ custom Google Fonts with clear hierarchy
- [ ] Create gradient effects that serve purpose
- [ ] Add entrance animations with staggered delays
- [ ] Include hover/focus states on interactive elements
- [ ] Use backdrop-filter or creative backgrounds
- [ ] Implement semantic color naming
- [ ] Ensure mobile responsiveness with @media queries
- [ ] Test contrast ratios with accessibility tools
- [ ] Avoid naming elements generically ("container", "wrapper")

## Example Patterns

### CSS Variables Pattern
```css
:root {
    --color-primary: #2563eb;
    --color-accent: #f97316;
    --color-text: #0f172a;
    --spacing-md: 1.5rem;
}
```

### Staggered Animation Pattern
```css
.element {
    animation: fadeInUp 0.8s ease-out 0.2s both;
}
.element:nth-child(2) {
    animation-delay: 0.3s;
}
```

### Hover Interaction Pattern
```css
.button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
```

### Typography Scale Pattern
```css
h1 {
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}
```

## When to Apply

- Building new UI components or pages
- Redesigning existing interfaces that feel generic
- Creating marketing landing pages
- Elevating visual hierarchy in dashboards
- Adding polish and personality to applications

## Success Metrics

- Does the design feel intentional, not AI-generated?
- Does typography provide clear hierarchy?
- Are colors used systematically (via variables)?
- Do animations enhance, not distract?
- Is the interface responsive and accessible?
- Does motion serve a functional purpose?

## References

- https://fonts.google.com/
- https://www.cssgradientsanmartino.com/
- https://easings.net/
- https://web.dev/responsive-web-design-basics/

AI resources​

Voice​

title: "#1 Free AI Voice Generator, Text to Speech, & AI Voice Over"
image: "https://play.ht/PlayAI-VoiceAI-LLM-TTS-ASR-STT-OGcard.png"
description: "The Best AI Voice Generator with 200+ realistic AI voices. PlayAI is the voice platform for creators & enterprises. See our low latency Text to Speech API."
url: "https://play.ht/"
favicon: ""
aspectRatio: "52.33333333333333"
title: "AI Voice Generator and Deepfake Detection for Enterprise | Resemble AI"
image: "https://www.resemble.ai/wp-content/uploads/2025/06/resemble-16x9-1-scaled.jpg"
description: "Resemble AI | Create AI voices and stop deepfakes with models built for enterprise scale and security."
url: "https://www.resemble.ai/"
favicon: ""
aspectRatio: "56.25"
title: "Free AI Voice Generator & Text to Speech Software | Murf AI"
image: "https://cdn.prod.website-files.com/66b3765153a8a0c399c70981/670584e2dab709883eed3793_Home.webp"
description: "Choose form 200+ AI voices and generate speech in 20+ languages. Murf's AI Voice Generator and Text to Speech software lets you create ultra-realistic AI voiceovers in seconds."
url: "https://murf.ai/"
favicon: ""
aspectRatio: "52.5"

image​

This lets you create shirts:

title: "T-shirt Templates - Playground"
image: "https://playground.com/api/og/design/c/t-shirt/opengraph-image"
description: "Discover thousands of customizable T-shirt templates. Perfect for creating unique logos, t-shirts, posters, and more for Etsy, Printify, Stickermule, and beyond!"
url: "https://playground.com/design/c/t-shirt"
favicon: ""
aspectRatio: "52.5"

lexica, stable diffusion search engine:

title: "Lexica"
image: "https://lexica.art/lexica-meta.png"
description: "The state of the art AI image generation engine."
url: "https://lexica.art/"
favicon: ""
aspectRatio: "60"