Mobile First Design Rules

'use strict';
/**
 * Post-execute hook for mobile-first-design-rules
 * Auto-generated by enterprise-bundle-scaffolder
 *
 * Records metrics after skill execution.
 */

function postExecute(_context) {
  // Record execution metrics
  return { ok: true, skill: 'mobile-first-design-rules' };
}

module.exports = { postExecute };

'use strict';
/**
 * Pre-execute hook for mobile-first-design-rules
 * Auto-generated by enterprise-bundle-scaffolder
 *
 * Validates inputs before skill execution.
 */

function preExecute(context) {
  // Validate skill invocation context
  if (!context || typeof context !== 'object') {
    return { allow: true, message: 'mobile-first-design-rules: no context to validate' };
  }
  return { allow: true };
}

module.exports = { preExecute };

---
description: Focuses on rules and best practices for mobile-first design and responsive typography using tailwind.
globs: **/*.{tsx,jsx}
---
- Always design and implement for mobile screens first, then scale up to larger screens.
- Use Tailwind's responsive prefixes (sm:, md:, lg:, xl:) to adjust layouts for different screen sizes.
- Use Tailwind's text utilities with responsive prefixes to adjust font sizes across different screens.
- Consider using a fluid typography system for seamless scaling.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "mobile-first-design-rulesInput",
  "description": "Input schema for Focuses on rules and best practices for mobile-first design and responsive typography using tailwind.",
  "type": "object",
  "additionalProperties": true,
  "properties": {
    "target": {
      "type": "string",
      "description": "Target file or path for the skill to operate on"
    },
    "options": {
      "type": "object",
      "description": "Additional options for skill execution",
      "additionalProperties": true
    }
  }
}

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "title": "mobile-first-design-rulesOutput",
  "type": "object",
  "additionalProperties": true,
  "properties": {
    "ok": {
      "type": "boolean"
    },
    "summary": {
      "type": "string"
    }
  }
}

#!/usr/bin/env node
/**
 * mobile-first-design-rules - Rule-based Skill
 * Converted from: mobile-first-design-rules.mdc
 */

const fs = require('fs');
const path = require('path');

// Parse arguments
const args = process.argv.slice(2);
const options = {};
for (let i = 0; i < args.length; i++) {
  if (args[i].startsWith('--')) {
    const key = args[i].slice(2);
    const value = args[i + 1] && !args[i + 1].startsWith('--') ? args[++i] : true;
    options[key] = value;
  }
}

if (options.help) {
  console.log(`
mobile-first-design-rules - Code Guidelines Skill

Usage:
  node main.cjs --check <file>    Check a file against guidelines
  node main.cjs --list            List all guidelines
  node main.cjs --help            Show this help

Description:
  Focuses on rules and best practices for mobile-first design and responsive typography using tailwind.
`);
  process.exit(0);
}

if (options.list) {
  console.log('Guidelines for mobile-first-design-rules:');
  console.log('See SKILL.md for full guidelines');
  process.exit(0);
}

console.log('mobile-first-design-rules skill loaded. Use with Claude for code review.');