styles

Name: styles
Author: dragonegor

Describe when these instructions should be loaded by the agent based on task context

by dragonegor(0) 0 installs

Free

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Instruction file imported from dragonegor/crs_dev_tool (.github/instructions/styles.instructions.md). Copyright stays with the author.

Write all styles only in SCSS.
For large blocks, styles can be extracted into separate files and imported into the main file.
Use max-width to limit content width (for example, on desktop) without adding paddings.
Always use the w768 mixin for mobile media queries and w769 for desktop media queries.

@mixin w768 {
  @media (max-width: 768px) {
    @content;
  }
}

@mixin w769 {
  @media (min-width: 769px) {
    @content;
  }
}

use the query mixins inside a selector

.section {
  font-size: 16px;
  @include w768 {
    font-size: 14px;
  }
}

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

dragonegor-crs-dev-tool-styles-instructions.ocm.jsonjson

{
  "ocm": "1",
  "id": "dragonegor-crs-dev-tool-styles-instructions",
  "kind": "skill",
  "name": "styles",
  "description": "Describe when these instructions should be loaded by the agent based on task context",
  "publisher": "dragonegor",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "github-instructions"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Describe when these instructions should be loaded by the agent based on task context"
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github-instructions",
      "repository": "https://github.com/dragonegor/crs_dev_tool",
      "path": ".github/instructions/styles.instructions.md",
      "ref": "afbf738e2cba54088a5350e0c6a505ca5da58efd",
      "url": "https://github.com/dragonegor/crs_dev_tool/blob/afbf738e2cba54088a5350e0c6a505ca5da58efd/.github/instructions/styles.instructions.md",
      "key": "dragonegor/crs_dev_tool/.github/instructions/styles.instructions.md"
    },
    "applies_to": "**/*.scss"
  },
  "instructions": "- Write all styles only in SCSS.\n- For large blocks, styles can be extracted into separate files and imported into the main file.\n- Use `max-width` to limit content width (for example, on desktop) without adding paddings.\n- Always use the `w768` mixin for mobile media queries and `w769` for desktop media queries.\n\n```scss\n@mixin w768 {\n  @media (max-width: 768px) {\n    @content;\n  }\n}\n```\n\n```scss\n@mixin w769 {\n  @media (min-width: 769px) {\n    @content;\n  }\n}\n```\n\n- use the query mixins inside a selector\n\n```scss\n.section {\n  font-size: 16px;\n  @include w768 {\n    font-size: 14px;\n  }\n}\n```",
  "cost": {
    "context_tokens": 149
  }
}

Fetch it by URL: GET /api/v1/registry/dragonegor-crs-dev-tool-styles-instructions/manifest?version=1.0.0

About

Use it

Manifest

Reviews