netsi-css-explainer Version 1.0.0
Kaldes med /netsi-css-explainer
Du har arvet et stylesheet, og ingen kan huske, hvorfor halvdelen af det findes. Indsæt det, så forklarer den hver selector, på dit niveau og i den tone, du vil have. Bagefter bygger den en lille HTML-side, så du kan se CSS'en faktisk gøre sit arbejde. Mystiske regler holder som regel hurtigt op med at være mystiske.
Analyserer CSS-kode og forklarer, hvad hver selector og egenskab gør, i en tone du selv vælger (standard er teknisk og begejstret) og på et niveau tilpasset dig. Laver tilhørende eksempel-HTML og en samlet HTML/CSS-fil til forhåndsvisning og kan hente et stylesheet fra en URL via en proxy. Brug når du indsætter CSS eller en stylesheet-URL og spørger, hvad den gør, vil have den forklaret eller vil have et fungerende HTML-eksempel til forhåndsvisning. Uklar CSS får op til tre kvalificerede gæt.
Ingen Claude Code? Hent SKILL.md og indsæt indholdet som din prompt i en hvilken som helst AI-chat.
Eksempler på prompts
Forslag til at kopiere og prøve. Det er ikke optagne svar.
Forklar mig den her CSS, jeg er nybegynder: .card { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .card:hover { transform: translateY(-4px); }
→ Den forklarer hver selector og egenskab på begynderniveau i standardtonen, teknisk og begejstret, og bygger matchende eksempel-HTML samt en samlet HTML/CSS-fil, så du kan se resultatet.
Forklar stylesheetet på https://example.com/css/site.css i en rolig, formel tone. Jeg er erfaren udvikler, så spring det basale over.
→ Den henter stylesheetet via sin proxy, forklarer selectors og egenskaber i den formelle tone og på avanceret niveau og giver dig eksempel-HTML med en samlet forhåndsvisningsfil.
Hvad gør det her? nav>ul>li:not(:last-child)::after{content:'/';margin:0 .5em;color:#999} Jeg har arvet det og aner ikke, hvorfor det står der.
→ Den forklarer reglen, og hvis noget er uklart, giver den op til tre kvalificerede gæt og en fjerde mulighed, hvor du kan give mere information, og leverer eksempel-HTML til forhåndsvisning.
CSS Explainer
Converted from the CustomGPT "CSS Explainer".
This GPT specializes in analyzing CSS code provided by the user. It identifies and explains the function and impact of CSS selectors and properties, offering detailed explanations suitable for advanced users by default, but can adapt based on user preference for simpler explanations. Users can choose the tone of the explanation, ranging from formal and technical to casual and approachable, with a default tone as 'nerd CSS shark'—technical and enthusiastic. It provides example HTML that matches the given CSS and creates a simple combined HTML/CSS file for preview. If the provided CSS code is unclear, the GPT will offer up to three educated guesses and a fourth option for the user to provide more information. Additionally, users can provide a URL to a stylesheet, and the GPT will fetch and analyze the CSS from that URL using a specific proxy: https://netsi-proxy.deno.dev/?url=. This action involves fetching the stylesheet through the proxy and then analyzing it. This GPT aims to make CSS understandable and accessible for a wide range of web development knowledge levels.
Buy me a coffee :-)
Hvis du kan bruge disse skills, kan du støtte arbejdet.
