CCM
/Skills
SkillsMCPMarketplacesDigestToolsAdvertise

This week in Claude

Every Monday: Claude Code, Agent SDK, MCP, and the Anthropic platform moves worth your time.

Skills by Category
Frontend DevelopmentBackend & APIsTesting & QASecurityDevOps & CI/CDGit & Pull RequestsDocumentationCode Review & QualityAI & Agent BuildingSkill Development
MCP Servers by Category
Sales & MarketingWeb & Browser AutomationDatabasesAI & LLM ToolsCloud & InfrastructureCommunication & MessagingDeveloper ToolsDesign & CreativeDocuments & KnowledgeSearch & Web Crawling
Marketplaces by Category
AI Agents & OrchestrationLLM IntegrationDevelopment ToolsFrontend & UIBackend & APIsDatabasesTesting & Code QualityDevOps & CloudSecurity & ComplianceGit & Version Control

Claude Code Marketplaces

Discover Claude Code plugins, extensions, and tools. Automatically updated directory of Anthropic Claude AI marketplaces with development tools, productivity plugins, and integrations.

Resources

  • Browse Skills
  • Browse MCP Servers
  • Browse Marketplaces
  • Skill index
  • MCP index
  • Marketplace index
  • Plugins Reference

Community

  • About
  • Tools
  • Feedback
  • Privacy Policy
  • Advertise

Built for the Claude Code community with Claude Code by mertbuilds.com

Independent project, not affiliated with Anthropic
affaan-m avatar

Frontend Design Direction

affaan-m/everything-claude-code
1.7k installs229.1k stars
Summary

Salvaged from a stale community PR by linus707, this is ECC's fork of frontend design guidance that pushes you to pick an explicit direction before writing UI code. It asks you to name the purpose, audience, tone, and one memorable detail so you don't default to purple gradients and hero sections on every dashboard. The anti-patterns list is honest: no cards inside cards, no decorative blobs when the domain needs restraint, no hiding the actual product behind marketing copy. Use this when you're building something that needs to feel intentional and matched to its context, not just functional. ECC keeps this separate from Anthropic's official frontend-design skill on purpose.

Install to Claude Code

npx -y skills add affaan-m/everything-claude-code --skill frontend-design-direction --agent claude-code

Installs into .claude/skills of the current project.

CodeRabbit
CodeRabbit
AI writes the code. CodeRabbit catches the slop.
Try For Free →
inference shell
inference shell
create and run specialised agents in minutes
build now →
MCP-ready Email SendingMCP-ready Email Sending
MCP-ready Email Sending
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Make your agent a DeFi expert
Make your agent a DeFi expert
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Capacitor - Shared memory for your team’s coding agents.
Capacitor - Shared memory for your team’s coding agents.
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
CodeScene MCP ServerCodeScene MCP Server
CodeScene MCP Server
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Give your AI the whole web as clean markdownGive your AI the whole web as clean markdown
Give your AI the whole web as clean markdown
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt - the only tool your agent needs
belt - the only tool your agent needs
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
CodeRabbit
CodeRabbit
AI writes the code. CodeRabbit catches the slop.
Try For Free →
inference shell
inference shell
create and run specialised agents in minutes
build now →
MCP-ready Email SendingMCP-ready Email Sending
MCP-ready Email Sending
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Make your agent a DeFi expert
Make your agent a DeFi expert
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Capacitor - Shared memory for your team’s coding agents.
Capacitor - Shared memory for your team’s coding agents.
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
CodeScene MCP ServerCodeScene MCP Server
CodeScene MCP Server
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Give your AI the whole web as clean markdownGive your AI the whole web as clean markdown
Give your AI the whole web as clean markdown
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt - the only tool your agent needs
belt - the only tool your agent needs
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Files
SKILL.md

Select a file.

Featured
CodeRabbit
CodeRabbit
AI writes the code. CodeRabbit catches the slop.
Try For Free →
inference shell
inference shell
create and run specialised agents in minutes
build now →
MCP-ready Email SendingMCP-ready Email Sending
MCP-ready Email Sending
Plug Mailtrap into your AI workflow and let it handle the email.
Connect Mailtrap MCP →
Make your agent a DeFi expert
Make your agent a DeFi expert
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
Capacitor - Shared memory for your team’s coding agents.
Capacitor - Shared memory for your team’s coding agents.
Make coding agent sessions - Searchable, Shareable, Vendor-neutral & Scored.
Try For Free →
CodeScene MCP ServerCodeScene MCP Server
CodeScene MCP Server
Your agent targets a perfect 10 Code Health score. Deterministic. Every commit.
Try For Free →
Give your AI the whole web as clean markdownGive your AI the whole web as clean markdown
Give your AI the whole web as clean markdown
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
belt - the only tool your agent needs
belt - the only tool your agent needs
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Categories
Frontend DevelopmentDesign & UI/UX
First SeenJun 3, 2026
View on GitHub

More from affaan-m/everything-claude-code

All 256 skills →
  • Homelab Network Readiness1.7k
  • Homelab Network Setup1.7k
  • Ios Icon Gen1.7k
  • Make Interfaces Feel Better1.7k
  • Motion Advanced1.7k
  • Motion Ui1.7k
  • Netmiko Ssh Automation1.7k
  • Network Bgp Diagnostics1.7k
  • Network Config Validation1.7k
  • Network Interface Health1.7k
  • Plan Orchestrate1.7k
  • Production Audit1.7k
  • Project Guidelines Example1.7k
  • Redis Patterns1.7k
  • Scholar Evaluation1.7k
  • Skill Stocktake1.7k
  • Tinystruct Patterns1.7k
  • Ui To Vue1.7k
  • Vite Patterns1.7k
  • Cost Tracking1.6k
  • Fsharp Testing1.6k
  • Gget1.6k
  • Homelab Pihole Dns1.6k
  • Homelab Vlan Segmentation1.6k

Recommended

More Frontend Development →
lotosbin avatar
ui-ux-designer

lotosbin/claude-skills

ui ux designer
1.7k
12
nickcrew avatar
react-performance-optimization

nickcrew/claude-ctx-plugin

react performance optimization
1.7k
20
forcedotcom avatar
generating-ui-bundle-custom-app

forcedotcom/sf-skills

MUST activate when the project contains a uiBundles/*/src/ directory and the task involves creating or configuring a Custom Application for hosting a UI bundle in Lightning Experience. Use this skill when creating a CustomApplication metadata record to surface the UI bundle in the App Launcher. Activate when files matching applications/*.app-meta.xml exist and need modification, or when the user wants to expose their app via the Lightning App Launcher without a Digital Experience Site. Do NOT use generating-custom-application for this — UI bundle apps do not use tabs, action overrides, or flexipages.
1.6k
803
mager avatar
frontend-design

mager/frontend-design

Frontend design skill that generates, restyles, and guides UI development in mager's actual design taste — concept-led interfaces that feel authored, tactile, expressive, and highly usable, spanning editorial warmth, bright modern product design, and high-contrast neon systems. Use this skill when building or reviewing any frontend UI.
1.6k
4
openai avatar
frontend-skill

openai/skills

Use when the task asks for a visually strong landing page, website, app, prototype, demo, or game UI. This skill enforces restrained composition, image-led hierarchy, cohesive content structure, and tasteful motion while avoiding generic cards, weak branding, and UI clutter.
1.6k
24.7k
getsentry avatar
sentry-react-router-framework-sdk

getsentry/sentry-for-ai

Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.
1.5k
246