Skip to main content
Glama

@depthark/css-first

by Luko248
npmGitHub
TypeScript
MIT License
1
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

MCP CSS First

An MCP (Model Context Protocol) server that provides CSS-first solutions for UI implementation tasks. This server integrates with Mozilla Developer Network (MDN) documentation to suggest CSS properties, check browser support, and provide implementation guidance with user consent mechanisms.

Features

  • CSS Property Suggestions: Analyzes UI task descriptions and suggests relevant CSS properties from MDN documentation
  • Browser Support Checking: Provides detailed browser compatibility information for CSS properties
  • User Consent Mechanism: Asks for user approval before recommending CSS properties with browser support information
  • Implementation Guidance: Provides code examples, best practices, and fallback strategies
  • MDN Integration: Fetches information from Mozilla Developer Network for accurate CSS documentation

Installation

pnpm install pnpm run build

Usage

Add to your MCP settings:

{ "mcpServers": { "mcp-css-first": { "command": "node", "args": ["dist/cli.js"] } } }

Available Tools

1. suggest_css_solution

Suggests CSS-first solutions for UI implementation tasks by searching MDN documentation.

Parameters:

  • task_description (string): Description of the UI task or problem to solve
  • preferred_approach (optional): 'modern', 'compatible', or 'progressive'
  • target_browsers (optional): Array of target browsers/versions

Example:

{ "task_description": "I need to center a div horizontally and vertically", "preferred_approach": "modern" }

2. check_css_browser_support

Checks browser support for specific CSS properties using MDN data.

Parameters:

  • css_property (string): CSS property name to check
  • include_experimental (optional boolean): Include experimental features

Example:

{ "css_property": "flexbox", "include_experimental": false }

3. get_css_property_details

Retrieves comprehensive information about a CSS property from MDN documentation.

Parameters:

  • css_property (string): CSS property name to get details for
  • include_examples (optional boolean): Include code examples

Example:

{ "css_property": "grid", "include_examples": true }

4. confirm_css_property_usage

Confirms user consent for using a specific CSS property and provides implementation guidance.

Parameters:

  • css_property (string): CSS property name user wants to use
  • user_consent (boolean): User consent to use this CSS property
  • fallback_needed (optional boolean): Whether fallback solutions are needed

Example:

{ "css_property": "container-queries", "user_consent": true, "fallback_needed": true }

How It Works

  1. Task Analysis: When you describe a UI task, the server extracts relevant CSS keywords
  2. MDN Integration: Searches MDN documentation for appropriate CSS properties
  3. Browser Support: Provides detailed browser compatibility information
  4. User Consent: Asks for approval before recommending properties with support details
  5. Implementation: Provides code examples, best practices, and fallback strategies

Development

# Install dependencies pnpm install # Build for development pnpm run build:tsc # Watch for changes pnpm run dev # Build for production pnpm run build # Run tests pnpm test # Lint code pnpm run lint

Project Structure

src/ ├── index.ts # Main MCP server implementation ├── services/ │ └── mdnApi.ts # MDN API integration and CSS property logic └── utils/ └── tryCatch.ts # Error handling utilities

CSS Property Coverage

The server currently supports suggestions for:

  • Layout: Flexbox, Grid, positioning
  • Responsive Design: Container queries, media queries
  • Animations: CSS animations, transitions
  • Visual Effects: Shadows, gradients, borders
  • Typography: Font properties, text alignment
  • Colors: Color properties, backgrounds

Browser Support Levels

  • Excellent (95%+): Safe for production use
  • Good (85%+): Consider fallbacks for legacy browsers
  • Moderate (70%+): Use with caution and provide fallbacks
  • Limited (<70%): Consider alternative approaches

License

MIT

Install Server
A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Tools

This server integrates with Mozilla Developer Network (MDN) documentation to suggest CSS properties, check browser support, and provide implementation guidance with user consent mechanisms.

  1. Features
    1. Installation
      1. Usage
        1. Available Tools
          1. 1. suggest_css_solution
          2. 2. check_css_browser_support
          3. 3. get_css_property_details
          4. 4. confirm_css_property_usage
        2. How It Works
          1. Development
            1. Project Structure
              1. CSS Property Coverage
                1. Browser Support Levels
                  1. License

                    Related Resources

                    Related MCP Servers

                    • Website Scraper MCP Server

                      tolik-unicornrider
                      A
                      security
                      F
                      license
                      A
                      quality
                      An MCP server that extracts meaningful content from websites and converts HTML to high-quality Markdown, using Mozilla's Readability engine.
                      Last updated -
                      1
                      7,866
                      6
                      JavaScript

                    • McpDocServer

                      ruan11223344
                      A
                      security
                      A
                      license
                      A
                      quality
                      A documentation server based on MCP protocol designed for various development frameworks that provides multi-threaded document crawling, local document loading, keyword searching, and document detail retrieval.
                      Last updated -
                      2
                      51
                      JavaScript
                      MIT License
                      • Apple
                      • Linux

                    • Browser Control MCP

                      eyalzh
                      -
                      security
                      A
                      license
                      -
                      quality
                      An MCP server paired with a Firefox extension that enables LLM clients to control the user's browser, supporting tab management, history search, and content reading.
                      Last updated -
                      83
                      TypeScript
                      MIT License

                    • MCP Documentation Server

                      droidnext
                      -
                      security
                      A
                      license
                      -
                      quality
                      A server that provides organized documentation content for various applications using the Model Context Protocol, enabling AI assistants to access quickstart guides and code examples.
                      Last updated -
                      Python
                      MIT License

                    View all related MCP servers

                    New MCP Servers

                    MCP directory API

                    We provide all the information about MCP servers via our MCP API.

                    curl -X GET 'https://glama.ai/api/mcp/v1/servers/Luko248/css-first'

                    If you have feedback or need assistance with the MCP directory API, please join our Discord server