菜单
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | frontend-design |
| description | Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics. |
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
Before coding, understand the context and commit to a BOLD aesthetic direction:
CRITICAL: Choose a clear conceptual direction and execute it with precision.
For React projects, prefer:
For HTML projects:
For comprehensive guidance, see these reference documents:
OpenClaw Gateway setup, configuration, and best practices. Use when installing OpenClaw, configuring channels (WhatsApp/Telegram/Discord), setting up providers (OpenAI/Google/Anthropic), creating skills, managing the gateway daemon, or troubleshooting OpenClaw issues. Triggers on: openclaw, gateway, whatsapp channel, telegram bot, openclaw skill, openclaw config, openclaw install, openclaw cron, openclaw security.
Use when the user asks how to build with OpenAI products or APIs and needs up-to-date official documentation with citations, help choosing the latest model for a use case, or explicit GPT-5.4 upgrade and prompt-upgrade guidance; prioritize OpenAI docs MCP tools, use bundled references only as helper context, and restrict any fallback browsing to official OpenAI domains.
Use this skill for setting up vector similarity search with pgvector for AI/ML embeddings, RAG applications, or semantic search. **Trigger when user asks to:** - Store or search vector embeddings in PostgreSQL - Set up semantic search, similarity search, or nearest neighbor search - Create HNSW or IVFFlat indexes for vectors - Implement RAG (Retrieval Augmented Generation) with PostgreSQL - Optimize pgvector performance, recall, or memory usage - Use binary quantization for large vector datasets **Keywords:** pgvector, embeddings, semantic search, vector similarity, HNSW, IVFFlat, halfvec, cosine distance, nearest neighbor, RAG, LLM, AI search Covers: halfvec storage, HNSW index configuration (m, ef_construction, ef_search), quantization strategies, filtered search, bulk loading, and performance tuning. **This project:** We use OpenAI text-embedding-3-small (1536) and store as vector(1536) in knowledge_chunks. halfvec is an optional future optimization; apply this skill's tuning (ef_search, iterative_scan
Supabase pgvector setup, RAG pipeline, and vector search for StartupAI. Covers knowledge_chunks schema, HNSW/IVFFlat indexes, search_knowledge + hybrid_search_knowledge RPCs, embedding generation via OpenAI, Edge Function integration, and Gemini web search grounding. **Trigger when user asks to:** - Set up or modify vector search, embeddings, or knowledge base - Ingest documents into knowledge_chunks - Debug search quality or missing results - Tune HNSW parameters or search performance - Wire RAG into edge functions or AI chat - Use Google Search grounding or URL Context with Gemini **This project:** OpenAI text-embedding-3-small (1536 dims), stored in knowledge_chunks, HNSW index, search via search_knowledge() and hybrid_search_knowledge() RPCs.
pgvector - PostgreSQL extension for vector similarity search. Use for embedding storage, cosine similarity, IVFFlat indexes, and HNSW indexes.
Channel the strategic thinking of fastest-growing AI startup founders. Use when asked to analyze current state, brainstorm strategy, set OKRs, or create execution plans. Provides founder personas, strategic frameworks, and battle-tested patterns from Anthropic, OpenAI, Mistral, Scale AI, and others.
